如何在HTML中内联管理SVG

时间:2015-05-13 03:55:53

标签: html css svg

有没有办法很好地管理SVG inline?

我正在尝试将img标记用于SVG,但CSS无法控制悬停样式。

我希望HTML更简单,而不是内联SVG.

JSFIDDLE

2 个答案:

答案 0 :(得分:2)

SVG必须在DOM中内联才能通过CSS设置样式。

您可以通过使用SVG注入器来实现此目的,该注入器将<img>标签替换为SVG。 例如,使用SVGInject,您可以像这样简单地添加SVG:

<img src="image.svg" onload="SVGInject(this)" />

属性onload="SVGInject(this)"确保在SVG加载后完成注入。

免责声明:我是上述SVG注射器的作者之一。

答案 1 :(得分:0)

您可以将svg文件转换为字体,以便可以应用更多所需的悬停样式。我希望这有帮助。尝试访问此网站icomoon.io