极客观点
项目管理
HarmonyOS
我正在尝试通过 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 。
所以基本上，我的问题是，如何获得与我链接的代码相同的结果，但要能够操作填充、描边等属性，并且它必须是一个 外部文件，而不仅仅是粘贴在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>
您还需要将其作为 object 插入到 html 中，否则它将无法工作。
<object data="decho.svg" type="image/svg+xml">
希望这有助于将来寻找像我这样的答案的人。这就是帮助我 http://www.hongkiat.com/blog/scalable-vector-graphic-css-styling/ 的原因。
原文由 decho 发布，翻译遵循 CC BY-SA 4.0 许可协议
在我看来，这是 svg: sandboxing 中最大的缺陷。
Svg 文件是沙盒： 在它们自己的文档中，这就是典型的“填充：”样式不适用的原因。同样，您在 svg 中编写的 css 将不适用于您网站的其余部分。
将 css 直接添加到 svg： 这不是一个好的解决方案，因为您最终会在使用的每个 svg 中重写 css。
真正的解决方案： “图标系统”。 Svg 字体或 svg 精灵。 在这里 阅读更多关于它们的信息。
不透明度起作用的原因： 不透明度适用于 svg 对象/框架本身，而不是 svg 的内容（不可访问）。
我还应该注意，无论您如何通过引用将这些 svg 内联加载到对象中作为背景，您都无法进入沙箱。这就是为什么将它们转换为字体或使用精灵对于使用悬停、焦点和其他效果/过渡是必要的。