如何使用css填充：在svg内的图像元素？

Question

.i image,
.i path,
.i {
  fill: red;
  stroke: red;
  margin-top: 5px;
}

<svg class="i">
    <image class="i" xlink:href="https://nextgenthemes.com/wp-content/bubble.svg" height="100%" width="100%"/>
</svg>

如果我使用<use>元素并引用svg定义文件中的符号，它确实有效。

jsbin

Answer 1

SVG <image>元素不接受fill作为属性。所以它不接受CSS fill等价物。

W3C SVG <image>元素：http://www.w3.org/TR/SVG11/struct.html#ImageElement

SVG <image>元素的属性定义：

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

如果它适用于SVG <use>元素而不是使用它！

Answer 2

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

1. 通过HTML <img>或background-image或通过SVG <image>加载的SVG可以被视为呈现为静态表单，其内容不能由父级设置。可以把它想象成已转换为位图。

2. CSS规则不适用于文档边界。您不能在一个文档（HTML）中设置规则来为另一个文档中的元素设置样式（在本例中为SVG bubble.svg）。