Html 使用 CSS 操作外部 svg 文件样式属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22252409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Manipulating external svg file style properties with CSS
提问by decho
I am trying to manipulate an external .svg file via CSS.
我正在尝试通过 CSS 操作外部 .svg 文件。
HTML
HTML
<body>
<div class="mysvg">
<img src="decho.svg" alt="decho" width="200px"></img>
</div>
</body>
CSS
CSS
div.mysvg img {
opacity: .3;
transition: opacity 1s linear 0s;
}
div.mysvg img:hover {
opacity: 1;
}
This code works for opacity, but not for fillor other svg specific attributes like stroke. I am aware I can't do that with an imgtag, but I've been looking for hours and I can't find the correct way to do it with svgor object.
此代码适用于不透明度，但不适用于fill其他 svg 特定属性，例如stroke. 我知道我不能用img标签来做到这一点，但我一直在寻找几个小时，我找不到正确的方法来使用svgor来做到这一点object。
So basically, my questions is, how do I achieve the same result as the code which I linked, but to be able to manipulate fill, stroke etc. properties and it must be an external file, not just an inline svg code pasted in the html.
所以基本上，我的问题是，我如何实现与我链接的代码相同的结果，但要能够操作填充、描边等属性，并且它必须是一个外部文件，而不仅仅是粘贴在html。
If someone is able to show me the correct way to do it, I'd be most grateful. Thanks.
如果有人能够向我展示正确的方法，我将不胜感激。谢谢。
EDIT:
编辑：
I managed to do it by adding a css inside the .svg file itself. It must be right after the svgopening tag.
我设法通过在 .svg 文件本身中添加一个 css 来做到这一点。它必须紧跟在svg开始标签之后。
<svg ...>
<style type="text/css" media="screen">
<![CDATA[
g {
fill: yellow;
stroke: black;
stroke-width: 1;
transition: fill 1s linear 0s;
}
g:hover {
fill: blue;
}
]]>
</style>
<g>
<path ...>
</g>
</svg>
You also need to insert it as an objectin the html, otherwise it won't work.
您还需要将其作为objecthtml插入，否则将无法正常工作。
<object data="decho.svg" type="image/svg+xml">
Hopefully this helps to someone looking for an answer like mine in future. This is what helped me http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/.
希望这有助于将来寻找像我这样的答案的人。这对我有帮助http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/。
回答by Robot
This is in my opinion the greatest flaw in svg: sandboxing.
在我看来，这是 svg 的最大缺陷：沙箱。
Svg files are sandboxed:in their own document, which is why a typical 'fill:' style will not apply. Likewise, the css you write in your svg will not apply to the rest of your site.
Svg 文件被沙箱化：在它们自己的文档中，这就是为什么典型的“填充：”样式不适用的原因。同样，您在 svg 中编写的 css 也不适用于您网站的其余部分。
Adding css directly to an svg:Not a good solution as you will end up rewriting the css in every svg you use.
将 css 直接添加到 svg：不是一个好的解决方案，因为您最终会在您使用的每个 svg 中重写 css。
The real solution:An "icon-system". Svg font-face or svg sprites. Read more about them here.
真正的解决方案：“图标系统”。svg 字体或 svg 精灵。在此处阅读有关它们的更多信息。
The reason opacity works:Opacity applies to the svg object/frame itself, not the contents of the svg (which are inaccessible).
不透明度起作用的原因：不透明度适用于 svg 对象/框架本身，而不是 svg 的内容（无法访问）。
I should also note that no matter how you load those svg's, inline, by reference, in an object, as a background, you will not be able to get inside the sandbox. This is why converting them to a font or using sprites is necessary for using hover, focus, and other effects/transitions.
我还应该注意，无论您如何加载这些 svg，内联，通过引用，在对象中，作为背景，您都将无法进入沙箱。这就是为什么将它们转换为字体或使用精灵对于使用悬停、焦点和其他效果/过渡是必要的。
回答by Ben Crook
This is possible providing the SVG is hosted on the same domain (thanks @FabienSnauwaert) and it does not have a fill colour defined on itself, and you do not contain a parent selector within the CSS. For example:
如果 SVG 托管在同一域上（感谢 @FabienSnauwaert）并且它本身没有定义填充颜色，并且您在 CSS 中不包含父选择器，则这是可能的。例如：
I have the following files:
我有以下文件：
- icon-sprite.svg (my external sprite of SVGs)
- buttons.scss
- test.html
- icon-sprite.svg（我的 SVG 外部精灵）
- 按钮.scss
- 测试.html
icon-sprite.svg
图标精灵.svg
I have omitted the other SVGs for clarity.
为清楚起见，我省略了其他 SVG。
<svg xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;">
<symbol viewBox="0 0 1500 828" id="icon-arrow-3pt-down">
<title>arrow-3pt-down</title>
<path d="M1500 0H0l738.9 827.7z"/>
</symbol>
</svg>
test.html
测试.html
<button class="button--large">
Large button
<svg class="svg" width="20px" height="20px">
<use xlink:href="icon-sprite.svg#icon-arrow-3pt-down"></use>
</svg>
</button>
buttons.scss
按钮.scss
.svg {
fill: red;
}
This would notwork if I was to use body .svgdue to shadow DOM boundaries.
这将不工作，如果我是使用body .svg由于影子DOM边界。
See this CSS Tricks article for more info
有关更多信息，请参阅此 CSS 技巧文章
