如何使用CSS设置外部SVG样式

Question

是否可以像使用文本一样使用CSS为外部.svg设置样式？我想念什么？我的标记和CSS看起来像这样：

<style type="text/css">
#ob {
    color: blue;
}

svg {
    fill: currentColor;
}


<object id="ob" type="image/svg+xml" data="czo_svg_icons/czo_extra_closed.svg">Your browser does not support SVG</object>

Answer 1

如果像引用object标签一样通过引用外部文件来包含svg图像，则svg图像中的元素将不包含在主文档DOM树中。他们组成了自己的树。因此，外部图像中的元素无法通过主文档中的CSS选择器进行匹配。

您可以object像大多数其他元素一样设置元素的样式，例如为其设置边框。但是您不能（至少这样）访问外部图像中的元素。在你的情况，你尝试风格#ob的color。这将适用于objects的文本颜色，而不适用于引用的svg图像内的任何颜色。在不支持svg的浏览器上，“您的浏览器不支持SVG”通知可能会显示为蓝色。

您的CSS选择器的情况与此svg类似：主文档中的CSS选择器仅与主文档中的元素匹配，没有svg找到，只是一个object。

有一些方法可以将CSS样式应用于svg元素。通常，此想法是通过从外部文件到主文档的svg元素或从主文档到外部文件的CSS，将CSS和svg元素置于同一DOM树中：

1. 将您的svg元素及其子元素直接嵌入主文档中，而不是引用外部文件。在这种情况下，svg元素及其子元素将成为man文档的DOM树的一部分，因此主文档的CSS可以访问它们。
2. 将svg元素嵌入到主文档中，并使用xlink use引用外部svg图像（而是其中的一部分）。
3. 如果您无法将外部svg图像中的元素获取到主文档的DOM树中，因此主文档CSS选择器可以与之匹配，则可以尝试另一种方法：将CSS添加到svg文件中。与将CSS包含到html文档中的方式类似，您可以使用内联style属性，使用stylehtml中的元素head或使用引用外部CSS文件<?xml-stylesheet ... ?>。