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

將CSS 樣式應用於嵌入的SVG

使用

簡短回答：否

CSS 樣式不能跨越文檔邊界，包括主文檔和嵌入的 SVG 之間的邊界。

替代解決方案

由於

var svgDoc = yourObjectElement.contentDocument;
var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
styleElement.textContent = "svg { fill: #fff }"; // style as desired
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檔案連結到樣式表，無需編寫腳本：

<?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>

附加選項：JQuery-SVG外掛程式

自2015 年起，您可以使用jquery-svg 插件將JS 腳本和CSS 樣式套用到嵌入式SVG。

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