使用CSS操作外部svg文件样式属性 [英] Manipulating external svg file style properties with CSS
问题描述
我试图通过CSS处理外部.svg文件。
HTML
< body> ;
< div class =mysvg>
< img src =decho.svgalt =dechowidth =200px>< / img>
< / div>
< / body>
CSS
div.mysvg img {
opacity：.3;
转换：不透明度1s线性0s;
}
div.mysvg img：hover {
opacity：1;
}
此代码适用于不透明，但不适用于填充或其他特定于svg的属性，如 stroke 。我知道我不能用 img 标签来做到这一点，但我一直在寻找几个小时，我找不到用 svg 或 object 。
所以基本上我的问题是，我如何获得与我链接的代码相同的结果，但要能够操纵填充，描边等属性，它必须是一个外部文件，而不仅仅是一个内嵌的svg代码粘贴在html。
如果有人能够向我展示正确的方法，我将非常感激。
编辑：
我设法通过在.svg文件本身中添加一个css来实现。它必须位于
svg 开始标记之后。 < svg ...>
< style type =text / cssmedia =screen>
<！[CDATA [
g {
fill：yellow;
笔画：黑色;
stroke-width：1;
转换：填充1s线性0s;
}
g：hover {
fill：blue;
}
]]>
< / style>
< g>
<路径...>
< / g>
< / svg>
您还需要将它作为对象在html中，否则它将不起作用。
< object data =decho.svgtype =image / SVG + xml的>
希望这可以帮助有人在未来寻找像我这样的答案。这是帮助我 http://www.hongkiat.com/blog / scalable-vector-graphic-css-styling / 。
这是我认为的最大缺陷svg：沙盒。
Svg文件在自己的文档中是沙盒内的<\\ strong>，这就是为什么一个典型的填充：'风格不适用。同样，您在svg中编写的CSS也不适用于您网站的其他部分。
将sss直接添加到svg：不是好的解决方案，因为您最终会在每个使用的svg中重写css。
真正的解决方案：<图标系统>。 Svg font-face或svg sprites。详细了解它们此处。
不透明的原因：不透明度适用于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屋！
