更改使用<object>

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

css的

svg object个样式只能应用于内联svg。如果您使用带有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