更改使用 <object> 嵌入的 SVG 的颜色

Question

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

所以，我将 SVG 图像嵌入到 html 中：

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

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

在这个片段https://jsfiddle.net/annaolsh/3j8dmnn2/ 中， SVG 就在 HTML 中，并且在悬停时颜色更改成功。如何做同样的事情？

Answer 1

cssa 的样式svg object只能应用于内联svg。如果您使用带有 HTML<object>标记的外部 url 嵌入它，则不能在其中使用<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

更改使用 &lt;object&gt; 嵌入的 SVG 的颜色