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

如果通过引用外部文件来包含svg图像，就像使用object标记一样，svg图像中的元素不会包含在主文档DOM树中。它们包含自己的树。因此，外部图像中的元素不能被主文档中的CSS选择器匹配。

您可以像对待大多数其他元素一样设置object元素的样式，例如为其指定边框。但是你不能（至少这样）访问外部图像中的元素。在您的情况下，您尝试设置#ob＆＃39; s color的样式。这将适用于object的文本颜色，而不适用于引用的svg图像中的任何颜色。在不支持svg的浏览器上，＆＃34;您的浏览器不支持SVG＆＃34;通知可能会以蓝色呈现。

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

有一些方法可以将CSS样式应用于svg元素。通常的想法是将CSS和svg元素放到同一个DOM树中，方法是将外部文件中的svg元素添加到主文档中，或者将CSS从主文档中获取到外部文件中：

1. 将您的svg元素及其子元素直接嵌入到主文档中，而不是引用外部文件。在这种情况下，svg元素及其子元素将成为man文档的DOM树的一部分，因此它们可以被主文档的CSS访问。
2. 将svg元素嵌入到主文档中，并使用xlink的use来引用外部svg图像（而不是其中的一部分）。一般而言，请参阅this answer或this answer。
3. 通过AJAX / XHR将元素从外部图像加载到主文档树。一般而言，请再次参阅this answer。
4. 您可以抓住外部图片＆＃39;用JavaScript编写树，然后从那里编辑它们的样式。该关键字为contentDocument，请参阅this answer。
5. 如果您无法将外部svg图像中的元素添加到主文档的DOM树中，那么CSS选择器的主要文档可以与之匹配，您可以尝试相反的方法：添加您的CSS到你的svg文件。与将CSS包含在html文档中的方式类似，您可以使用内联style属性，使用html＆＃39; s style中的head元素或引用外部CSS文件与<?xml-stylesheet ... ?>。有关详细信息，请参阅示例this tutorial。