你如何用 css 设置外部 svg 的样式 [英] How do you style a external svg with css

问题描述

是否可以像使用文本一样使用 css 设置外部 .svg 的样式?我错过了什么?我的标记和 css 如下所示:

Is it possible to style an external .svg with css like you would with text? What am I missing? My mark up and css looks like this:

<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>

推荐答案

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

If you include your svg image by referencing an external file, like you do with the object tag, the elements in the svg image are not included to your main documents DOM tree. They comprise their own tree. Therefore, the elements in the external image can't be matched by CSS selectors in the main document.

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

You can style the object element like you could most other elements, for example giving it a border. But you can't (this way, at least) access the elements in the external image. In your case, you try to style #ob's color. That would apply to the objects text color, not to any color inside the referenced svg image. On browsers not supporting svg, the "Your browser does not support SVG" notice would probably rendered in blue.

svg 的 CSS 选择器的情况类似:主文档中的 CSS 选择器只匹配主文档中的元素，并且找不到 svg，只是一个 object.

The case with your CSS selector for svg is similar: CSS selectors in the main document match only to elements in the main document, and there's no svg to be found, just an object.

有一些方法可以将 CSS 样式应用到 svg 元素.这个想法通常是将 CSS 和 svg 元素带到同一个 DOM 树，通过将 svg 元素从外部文件获取到主文档或将 CSS 从主文档获取到外部文件:

There are some ways to apply CSS styling to svg elements. The idea generally is to bring the CSS and the svg elements to the same DOM tree, either by getting the svg elements from the external file to the main document or the CSS from the main document to the external file:

1. 将您的 svg 元素及其子元素直接嵌入到主文档中，而不是引用外部文件.在这种情况下，svg 元素及其子元素将成为 man 文档的 DOM 树的一部分，因此主文档的 CSS 可以访问它们.
2. 将 svg 元素嵌入到您的主文档中，并使用 xlink 的 use 来引用外部 svg 图像(而是它的一部分).有关总体思路，请参阅此答案或这个答案.莉>
3. 通过 AJAX/XHR 将元素从外部图像加载到主文档树.对于总体思路，再次参见 this回答.
4. 您可以使用 JavaScript 获取外部图像的树并从那里编辑它们的样式.其关键字是 contentDocument，参见 这个答案.
5. 如果您无法将元素从外部 svg 图像获取到主文档的 DOM 树，以便主文档 CSS 选择器可以与之匹配，您可以尝试相反的方法:将 CSS 添加到您的 svg 文件中.类似于将 CSS 包含到 html 文档中的方式，您可以使用内联 style 属性，使用 style 元素，如 html 的 head 或使用 <?xml-stylesheet ... ?> 引用外部 CSS 文件.有关详细信息，请参阅例如本教程.

1. Embed your svg element and its child elements directly into the main document instead of referencing an external file. In this case, the svg element and its children will be part of the man document's DOM tree, so they're accessible to the main document's CSS.
2. Embed an svg element into your main document and use xlink's use to reference an external svg image (rather, a part of it). For the general idea, see this answer or this answer.
3. Load the elements from the external image to the main documents tree via AJAX/XHR. For the general idea, again see this answer.
4. You can grab a hold of the external images' tree with JavaScript and edit their styles from there. The keyword for that would be contentDocument, see this answer.
5. If you can't get the elements from your external svg image to your main document's DOM tree, so the main documents CSS selectors can match to it, you can try the other way around: Add your CSS to your svg file. Similar to the ways you can include CSS into a html document, you can use inline style attributes, use a style element like in html's head or reference an external CSS file with <?xml-stylesheet ... ?>. For more information, see for example this tutorial.

这篇关于你如何用 css 设置外部 svg 的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！