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

【问题标题】：Changing color of SVG which was embedded using <object>更改使用 <object> 嵌入的 SVG 的颜色
【发布时间】：2017-10-01 02:12:16
【问题描述】：

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

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

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

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

在这个 sn-p https://jsfiddle.net/annaolsh/3j8dmnn2/ SVG 就在 HTML 中，并且成功悬停时颜色会发生变化。如何做同样的事情？

【问题讨论】：

【解决方案1】：

svg object 的css 样式只能应用于内联svg。如果使用带有 HTML <object> 标签的外部 url 嵌入它，则不能在 document 中使用 <style> 标签，或者不能使用外部 css 文件修改 svg 内容。

如果您嵌入了外部svg 文件，则必须在svg 文件本身中添加<style> 标签，如下所示。

<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

【讨论】：