html - 有没有办法使用 CSS 在 SVG 中填充图像？

Question

就像通过CSS设置填充、描边等CSS样式一样，有没有办法单独使用CSS将图像(背景图像)设置为SVG元素？一些现有的解决方案有 <image> <svg> 内的标签元素，但我不想拥有它，因为我使用的是生成 SVG 的第三方库，因此 CSS 似乎是一个不错的选择。

更新:我想添加一个 background到特定的 svg元素，而不是整个 SVG。没有意识到之前的实际问题中没有提到它。

Answer 1

我认为您可以做您想做的唯一方法是在单独的 SVG 中定义图案填充。然后您可以通过 CSS 分配这些预定义的模式。

演示:

.filled {
  fill: url(#image-fill);
}

<svg width="0" height="0">

  <!-- image fills defined here in this hidden SVG -->
  <defs>
    <pattern id="image-fill"
             patternContentUnits="objectBoundingBox" width="1" height="1">
      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"
             xlink:href="https://placekitten.com/400/400"/>
    </pattern>
  </defs>

</svg>



<svg viewBox="0 0 500 500">
  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>
</svg>