我正在尝试通过CSS处理外部.svg文件。
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;
}
此代码适用于不透明度，但不适用于
fill或其他svg特定于属性的属性，例如stroke。我知道我无法使用img标记执行此操作，但是我一直在寻找数小时，并且找不到使用svg或object的正确方法。所以基本上，我的问题是，我如何获得与链接的代码相同的结果，但要能够操纵填充，笔触等属性，它必须是外部文件，而不仅仅是粘贴的内嵌svg代码在html中。
如果有人能够向我展示正确的方法，我将不胜感激。谢谢。
编辑:
我设法通过在.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>
您还需要在html中将其作为
object插入，否则它将无法正常工作。<object data="decho.svg" type="image/svg+xml">
希望这对将来像我这样寻找答案的人有所帮助。这就是帮助我http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/的原因。
最佳答案
我认为这是svg的最大缺陷: sandboxing 。
Svg文件在其自己的文档中被沙箱化:，这就是为什么典型的“fill:”样式将不适用的原因。同样，您在svg中编写的CSS不适用于网站的其余部分。
将CSS直接添加到svg:并不是一个好的解决方案，因为您最终将在使用的每个svg中重写css。
真正的解决方案:一个“图标系统”。 SVG字体或SVG精灵。阅读更多关于它们的信息here。
不透明度起作用的原因:不透明度适用于svg对象/框架本身，而不适用于svg的内容(无法访问)。
我还应注意，无论如何通过引用将这些svg内联地加载到对象中(作为背景)，都将无法进入沙箱。这就是为什么要使用悬停，聚焦和其他效果/过渡将它们转换为字体或使用精灵的原因。
关于html - 使用CSS处理外部svg文件样式属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22252409/