如何将样式应用于嵌入式SVG？

当使用<svg>标记将SVG直接包含在文档中时，可以通过文档的样式表将CSS样式应用于SVG。但是，我试图将样式应用于嵌入的SVG（使用<object>标签）。如何将样式应用于嵌入式SVG？

是否有可能使用任何东西，如下面的代码？

object svg { 
    fill: #fff; 
}

来源

2011-02-05 Joshua Sortino

我想出了一个轻量级的方式来做到这一点你正在尝试做这将工作非常适合。看到这个问答： http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/ – 2012-08-16 00:16:01

简答：不，因为样式不适用于文档边界。

但是，由于您有<object>标签，因此可以使用脚本将样式表插入到svg文档中。

这样的事情，并注意该代码假定<object>完全加载：

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

它也可以插入一个<link>元素引用外部样式表：

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

然而，另一个选择是使用第一种方法插入样式元素，然后添加@import规则，例如styleElement.textContent = "@import url(my-style.css)"。

当然，您也可以直接链接到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>

更新2015：您可以使用jquery-svg插件应用JS脚本和CSS样式嵌入SVG。

来源

2011-02-05 11:30:57

这是一个链接的方法一个外部样式表？如果没有，那可能吗？ – 2011-02-06 00:33:35

你可以在没有javsscrpt的情况下通过在SVG文件本身中放置一个包含样式的样式块来完成此操作。

<style type="text/css"> 
path, 
circle, 
polygon { 
    fill: #fff; 
    } 
</style>

来源

2016-05-25 11:43:22

如何将样式应用于嵌入式SVG？

回答

相关问题