您如何使用 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 的color 样式。这将适用于 objects 文本颜色，而不适用于引用的 svg 图像内的任何颜色。在不支持 svg 的浏览器上，“您的浏览器不支持 SVG”通知可能会呈现为蓝色。

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. 您可以使用 JavaScript 抓住外部图像的树并从那里编辑它们的样式。其关键字是contentDocument，请参阅this answer。
5. 如果您无法将外部 svg 图像中的元素获取到主文档的 DOM 树中，因此主文档 CSS 选择器可以与之匹配，您可以尝试相反的方法：将您的 CSS 添加到您的 svg 文件中。与将 CSS 包含到 html 文档中的方法类似，您可以使用内联 style 属性、使用 html 的 head 中的 style 元素或使用 <?xml-stylesheet ... ?> 引用外部 CSS 文件。有关详细信息，请参阅例如 this tutorial。