你如何用css来管理外部svg [英] How do you syle 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>

推荐答案

如果您通过引用外部文件，就像你使用 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 的颜色。这将应用于对象的文本颜色，而不是所引用的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选择器仅匹配主文档中的元素，并且没有找到 svg code> 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的使用引用外部svg图像而是它的一部分）。有关常规方法，请参见此答案或< a href =http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file/3378320#3378320>此答案。 li>
   
3. 通过AJAX / XHR将元素从外部图像加载到主文档树。有关常规建议，请再次参阅此回答。


4. 您可以使用JavaScript抓住外部图片树并从中编辑其样式。关键字为 contentDocument ，请参阅此回答。


5. 如果您无法从外部svg图片到主文档的DOM树，所以主要文档CSS选择器可以匹配到它，你可以尝试另一种方式：添加你的CSS到你的svg文件。类似于在HTML文档中包含CSS的方法，您可以使用inline style 属性，使用 style 元素像html的 head 或引用一个外部CSS文件<？xml-stylesheet ...？> 。有关详细信息，请参阅本教程。

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