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

【问题标题】：How to use css fill: on image elements inside svg?如何使用 css 填充：在 svg 内的图像元素上？
【发布时间】：2015-11-18 04:42:32
【问题描述】：

.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 定义文件中引用一个符号，它确实有效。

【问题讨论】：

尝试使用“stroke”属性而不是“fill”
也可以尝试内联，您的样式表被引用可能存在问题
developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
当它是一个 svg 并引用了一个带有 use 标签的 svg sprite 时，它与 fill 一起工作得很好。感谢您的建议，但这无济于事。看起来是不可能的。我正想着我找到了图标的 HTTP/2 读取解决方案。

标签： svg

【解决方案1】：

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

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

如果它与 SVG <use> 元素一起使用，请不要使用它！

【讨论】：

我担心这个。我不想使用<use> 的原因是我需要包含 svg-for-everybody，因为并非所有浏览器都支持使用锚点 svgdev.svg#icon1 引用外部 svg 定义。此外，我正在为一个 HTTP/2 世界编写代码，其中精灵实际上是不好的做法。所以我实际上会在很多定义文件中引用一个带有 ID 的图标。在没有 ID 的情况下使用简单的 svg 文件不适用于使用 <use> 我的猜测是不支持/不打算这样做。所以当我遇到<image> 时，我很高兴，并认为这是我需要的解决方案。
我不时使用<img> 将其转换为内联<svg> 以便能够填充path 有趣的是我之前在CSS 中不需要path .
当使用 <use> 元素并且如果它使用 CSS 引用 SVG <defs> 元素内的 SVG 元素时。由于 CSS 未直接在 <defs> 或元素中呈现，因此您不能在 <defs> 元素内的任何内容上使用 CSS。在这种情况下，您必须改为更改属性。 <defs> developer.mozilla.org/en-US/docs/Web/SVG/Element/defs .. 但很高兴你能成功:)

【解决方案2】：

你想要的东西是不可能的，有两个不同的原因。

通过 HTML <img> 或 background-image 或通过 SVG <image> 加载的 SVG 可被视为呈现为静态表单，其内容无法由父级设置样式。将其视为已转换为位图。
CSS 规则不适用于跨文档边界。您不能在一个文档（HTML）中使用规则来为另一个文档（在本例中为 SVG bubble.svg）中的元素设置样式。

【讨论】：