當直接 CSS 樣式受到限制時，如何有效地設定嵌入式 SVG 樣式？

設計嵌入式SVG：CSS 限制和替代方法

概述

與直接包含的SVG 相比，設計嵌入式SVG（可縮放向量圖形）可能會帶來挑戰在一個文件中。了解限制並探索替代方法對於有效的樣式至關重要。

嵌入式 SVG 的直接 CSS 樣式

當使用

object svg {
    fill: #fff;
}

使用腳本注入樣式

由於嵌入的 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);

或者，可以使用 連結外部樣式表元素：

var svgDoc = yourObjectElement.contentDocument;
var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
linkElm.setAttribute("href", "my-style.css");
linkElm.setAttribute("type", "text/css");
linkElm.setAttribute("rel", "stylesheet");
svgDoc.getElementById("where-to-insert").appendChild(linkElm);

從SVG 檔案直接設定樣式

或者，樣式可以直接連結或包含在SVG文件中：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="my-style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg">
  ... rest of document here ...
</svg>

或

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <link href="my-style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  ... rest of document here ...
</svg>

附加選項：jquery-svg外掛程式

為了進一步提高靈活性，jquery-svg 外掛程式提供了將CSS 樣式和JavaScript 腳本應用於嵌入式SVG 的方法。

以上是當直接 CSS 樣式受到限制時，如何有效地設定嵌入式 SVG 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！