我试图通过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> …