如何在CSS中设置背景图像以使用定义的SVG模式？

Question

HTML：

<svg>
  <defs>
    <svg-pattern-of-some-sort id="my-pattern" />
  </defs>
</svg>

<div class="box"></box>

CSS：

.box {
  width: ...;
  height: ...;
  background-image: url(#my-pattern)
}

你怎么能做到这一点？

SVG元素可以将SVG模式用作fill，background-image可以指向.svg，但是如何启用DOM元素来获取SVG（用HTML编写） ）作为它的背景 - 没有复杂的Base-64转换等？

Answer 1

您可以直接在CSS中使用SVG：

.box {
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

不需要Base64转换......当然会有一些浏览器在理解这种语法时遇到问题。