更改使用 嵌入的 SVG 的颜色
2024-01-04

我在 StackOverflow 上只找到了一种解决方案,但用户说这对他们不起作用。

所以,我将 SVG 图像嵌入到 html 中:

<object id="help-center" type="image/svg+xml" data="assets/help_center.svg">
</object>

我不明白在这种情况下如何改变悬停时的颜色。

在这个片段中https://jsfiddle.net/annaolsh/3j8dmnn2/ https://jsfiddle.net/annaolsh/3j8dmnn2/SVG 位于 HTML 内部,并且悬停时颜色会成功更改。如何做同样的事情?


css的样式svg object可以申请内联svg仅有的。如果您使用外部 url 和 HTML 来嵌入它<object>标签,您不能使用<style>内的标签document或者你不能使用外部css文件来修改svg内容。

如果您嵌入外部svg文件,你必须添加<style>内的标签svg文件本身如下。

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

否则获取源svg文件并将其内联到HTML文件,然后直接添加你的CSS样式。这就是为什么您的 JSFiddle 示例有效而您提供的代码示例无效。

您可以阅读有关如何设计风格的更多信息svg这里的对象。
https://css-tricks.com/using-svg/#article-header-id-11 https://css-tricks.com/using-svg/#article-header-id-11

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改使用 嵌入的 SVG 的颜色 的相关文章

随机推荐