如何在svg中的图像元素上使用css填充？

.i图像，
.i.道路，
.我{
填充物：红色；
笔画：红色；
边缘顶部：5px；
}

---

由于两个不同的原因，您想要的是不可能的

通过HTML

或

背景图像

加载的SVG，或通过SVG

加载的SVG，可被视为呈现为静态形式，其内容不可由父级设置样式。可以将其视为已转换为位图

CSS规则不会跨文档边界应用。在一个文档（HTML）中不能有规则为另一个文档（在本例中为SVG

bubble.SVG

）中的元素设置样式

SVG

元素不接受

fill

作为属性。因此，它不会接受CSS

fill

等同物

W3C SVG

元素：

SVG

元素的属性定义：

• x=放置参考文档的矩形区域一角的x轴坐标。 如果未指定该属性，则效果就像指定了值“0”。 动画：是的
• y=放置参考文档的矩形区域一角的y轴坐标。 如果未指定该属性，则效果就像指定了值“0”。 动画：是的
• 宽度=放置引用文档的矩形区域的宽度。 负值表示错误（请参阅错误处理）。值为零将禁用元素的渲染。 动画：是的
• 高度=放置引用文档的矩形区域的高度。 负值表示错误（请参阅错误处理）。值为零将禁用元素的渲染。 动画：是的
• xlink:href=IRI参考。 动画：是的

---

如果它与SVG

元素一起工作，请使用它

尝试使用“stroke”属性而不是“fill”，也可以尝试内联使用，可能会出现样式表被引用的问题当它是一个svg并引用带有use标记的svg精灵时，它的填充效果很好。谢谢你的建议，但这没有帮助。看来这是不可能的。我想我找到了图标的HTTP/2读取解决方案。我担心这一点。我不想使用

的原因是我需要为每个人都包含svg，因为并非所有浏览器都支持使用锚

svgdev.svg\icon1

引用外部svg定义。我还为一个HTTP/2世界编写了这个代码，在这个世界中，精灵实际上是不好的实践。所以我会在很多定义文件中引用一个带有ID的图标。对简单svg文件使用无ID的方式无法使用

我猜它不受支持/不打算这样做。因此，当我遇到

时，我很高兴并认为这是我需要的解决方案。我时不时地使用

一个小的JS函数将其转换为内联

，然后能够填充

路径

，有趣的是，我以前不需要CSS中的

路径

。使用

元素时使用CSS引用SVG

元素中的SVG元素。您不能在

元素中的任何内容上使用CSS，因为CSS没有在

或元素中直接呈现。在这种情况下，您必须更改属性<代码>。。但很高兴你成功了：）