如何使用 `` 標籤設定嵌入 SVG 的樣式？

將樣式應用於嵌入式SVG

與透過

技術說明

樣式表僅適用於定義它們的文件的邊界內。嵌入式 SVG 被視為獨立的文檔，因此外部定義的樣式不會影響它們。

解決方案：基於腳本的樣式插入

由於

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }";
svgDoc.getElementById("where-to-insert").appendChild(styleElement);

這假設

替代方法

• 在SVG 中包含樣式表：從內部連結到外部樣式表使用?xml-stylesheet 處理指令或 的SVG 檔案中的元素
• 使用 jQuery-SVG 外掛：利用 jQuery-SVG 外掛程式將 JavaScript 和 CSS 樣式套用到嵌入的 SVG。

直接CSS定位

如果嵌入的SVG 保存在單獨的文件中，您可以定義針對

object[data="my-embedded-svg.svg"] {
  fill: #fff;
}

此方法不會將樣式套用於SVG本身，但它對於調整嵌入元素的整體外觀很有用。

以上是如何使用 `` 標籤設定嵌入 SVG 的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！