使用<object>嵌入的SVG的颜色发生变化. [英] Changing color of SVG which was embedded using &amp;lt;object&amp;gt;

问题描述

我在StackOverflow上只找到一种解决方案，但用户说这不适用于他们.

因此，我将SVG图像嵌入到html中:

 <对象id =帮助中心" type ="image/svg + xml" data =资产/help_center.svg"></object> 

在这种情况下，我不明白如何更改颜色.

在此代码段中 https://jsfiddle.net/annaolsh/3j8dmnn2/ SVG是正确的内HTML和鼠标悬停时颜色更改成功.如何做同样的事情?

css 样式的

解决方案

可以应用于内联 svg 仅.如果您使用带有HTML < object> 标记的外部URL嵌入它，则不能在文档< style> 标记>，否则您将无法使用外部 css 文件修改 svg 内容.

如果您嵌入一个外部 svg 文件，则必须在 svg 文件本身内添加< style> 标记，如下所示.

 < svg ...>< style>/* SVG特定的精美CSS样式在这里*/</style>...</svg> 

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

您可以在此处详细了解如何设置 svg 对象的样式.
https://css-tricks.com/using-svg/#article-header-id-11

I found only one solution on StackOverflow, but user said it didn't work for them.

So, I embedded SVG image to html:

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

I don't understand how to change color on hover in this case.

In this snippet https://jsfiddle.net/annaolsh/3j8dmnn2/ SVG is right inside HTML and color changes on hover successfully. How to do same thing?

解决方案

css styles for a svg object can be applied for an inline svg only. If you embed it using an external url with the HTML <object> tag, you can not use the <style> tag within the document or you can not use an external css file to modify the svg content.

If you embed an external svg file, you have to add the <style> tag within the svg file itself as below.

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

Otherwise get the source of svg file and inline it on the HTML file and then add your css styles directly. That's why your JSFiddle example worked and your provided code sample didn't work.

You can read more about how you can style svg objects here.
https://css-tricks.com/using-svg/#article-header-id-11

这篇关于使用<object>嵌入的SVG的颜色发生变化.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！