使用 CSS 操作外部 svg 文件样式属性 [英] Manipulating external svg file style properties with CSS
问题描述
我正在尝试通过 CSS 操作外部 .svg 文件.
HTML
<div class="mysvg"><img src="decho.svg" alt="decho" width="200px"></img>CSS
div.mysvg img {不透明度:.3；过渡:不透明度 1s 线性 0s；}div.mysvg img:悬停{不透明度:1；}此代码适用于不透明度，但不适用于 fill 或其他 svg 特定属性，例如 stroke.我知道我不能用 img 标签来做到这一点，但我一直在寻找几个小时，我找不到用 svg 做到这一点的正确方法或 object.
所以基本上，我的问题是，我如何实现与我链接的代码相同的结果，但要能够操作填充、描边等属性，并且它必须是一个外部文件，而不仅仅是粘贴在 html 中的内联 svg 代码.
如果有人能够向我展示正确的方法，我将不胜感激.谢谢.
<小时>我设法通过在 .svg 文件本身中添加一个 css 来做到这一点.它必须紧跟在 svg 开始标记之后.
还需要将它作为object插入到html中，否则将无法工作.
希望这有助于将来寻找像我这样的答案的人.这对我有帮助 http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/.
在我看来这是 svg 最大的缺陷:沙盒.
Svg 文件被沙盒化: 在它们自己的文档中，这就是为什么典型的填充:"样式不适用的原因.同样，您在 svg 中编写的 css 也不适用于您网站的其余部分.
将 css 直接添加到 svg: 不是一个好的解决方案，因为您最终会在您使用的每个 svg 中重写 css.
真正的解决方案:图标系统".svg 字体或 svg 精灵.在此处阅读有关它们的更多信息.
不透明度起作用的原因:不透明度适用于 svg 对象/框架本身，而不是 svg 的内容(无法访问).
我还应该注意，无论您如何加载这些 svg，内联，通过引用，在对象中，作为背景，您都将无法进入沙箱.这就是使用悬停、焦点和其他效果/过渡需要将它们转换为字体或使用精灵的原因.
I am trying to manipulate an external .svg file via CSS.
HTML
<body>
<div class="mysvg">
<img src="decho.svg" alt="decho" width="200px"></img>
</div>
</body>
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 fill or other svg specific attributes like stroke. I am aware I can't do that with an img tag, but I've been looking for hours and I can't find the correct way to do it with svg or 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.
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 svg opening tag.
<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 object in the html, otherwise it won't work.
<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/.
This is in my opinion the greatest flaw in svg: sandboxing.
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.
Adding css directly to an svg: Not a good solution as you will end up rewriting the css in every svg you use.
The real solution: An "icon-system". Svg font-face or svg sprites. Read more about them here.
The reason opacity works: Opacity applies to the svg object/frame itself, not the contents of the svg (which are inaccessible).
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.
这篇关于使用 CSS 操作外部 svg 文件样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
