如何使用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>

- Eric

Answer 1

如果您通过引用外部文件（如使用object标签）来包含svg图像，则svg图像中的元素不会被包含在主文档的DOM树中，而是构成它们自己的树。因此，外部图像中的元素无法由主文档中的CSS选择器匹配。

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

对于您的svg CSS选择器，情况类似：主文档中的CSS选择器仅匹配主文档中的元素，并且找不到svg，只有一个object。

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

1. 将您的svg元素及其子元素直接嵌入到主文档中，而不是引用外部文件。在这种情况下，svg元素及其子元素将成为主文档DOM树的一部分，因此它们可以被主文档的CSS访问。
2. 将svg元素嵌入主文档，并使用xlink的use引用外部SVG图像(或图像的一部分)。有关概念，请参见此答案或此答案。
3. 通过AJAX/XHR从外部图像加载元素到主文档树中。有关概念，请再次参见此答案。
4. 您可以使用JavaScript获取外部图像的文档树，并从那里编辑它们的样式。关键词是contentDocument，请参见此答案。
5. 如果无法将外部SVG图像的元素添加到主文档的DOM树中，使其能够匹配主文档的CSS选择器，则可以尝试相反的方法：将CSS添加到SVG文件中。类似于将CSS包含到html文档中的方式，可以使用内联style属性，使用像html的head中的style元素或引用外部CSS文件，如<?xml-stylesheet ... ?>。有关更多信息，请参见此教程。

- Henning Kockerbeck