CSS 樣式是否可以套用於嵌入 `` 標籤內的 SVG？

嵌入式 SVG 的 CSS 樣式

使用

簡短回答：否

CSS 樣式不會遍歷文件邊界。 在這種情況下，標籤有效地在包含文件和嵌入的 SVG 之間建立了邊界。

替代方法

幸運的是，還有其他方法來設定嵌入式 SVG 的樣式：

1。程式設計樣式表插入：

使用 JavaScript，可以將樣式表直接插入

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

2.外部樣式表引用：

A 可以插入元素來引用外部樣式表：

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);

3. CSS 導入（@import規則）：

第一種方法可用於插入樣式元素，然後新增@import 規則：

styleElement.textContent = "@import url(my-style.css)";

4.直接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">
  ... (SVG content) ...
</svg>

5. jquery-svg 外掛：

jquery-svg 外掛提供了另一種將JavaScript 和CSS 樣式應用於嵌入式SVG 的方法。

以上是CSS 樣式是否可以套用於嵌入 `` 標籤內的 SVG？的詳細內容。更多資訊請關注PHP中文網其他相關文章！