css - 你如何使用 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 .这将适用于 object s 文本颜色，而不是引用 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属性，使用 style类似 html 中的元素 head或使用 <?xml-stylesheet ... ?> 引用外部 CSS 文件.有关详细信息，请参阅示例 this tutorial .