在 CSS 中定义填充模式,以在 SVG 中使用

Dav*_*ami 5 css svg

我如何(或有办法)在 CSS 中定义要在 SVG 中使用的 SVG 填充模式?我可以像这样在 HTML 中做到这一点:

CSS:

.some-class-for-html {
  background-image: url("data:image/svg+xml;base64,gibberish-goes-here==");    
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="some-class-for-html">
  Blah blah blah
</div>
Run Code Online (Sandbox Code Playgroud)

我想为 SVG 做等效的事情,保持在 CSS 中定义的模式。我发现的最接近的是Fill SVG path element with a background-image,但这涉及在 SVG 中定义填充。我想保留 CSS 中定义的填充,就像我对 HTML 所做的一样,以及我对 SVG 颜色所做的一样。我尝试了以下方法:

CSS:

.some-class-for-SVG {
  fill: url("data:image/svg+xml;base64,gibberish-goes-here==");    
}
Run Code Online (Sandbox Code Playgroud)

SVG:

<rect class="some-class-for-svg" x="0" y="0" width="100" height="100">
Run Code Online (Sandbox Code Playgroud)

但这会在没有填充的情况下渲染。到目前为止,我已经通过在生成 SVG 时将<defs><pattern>节点插入到 SVG 中来解决这个问题,但这当然意味着要更改模式,您必须更改 Javascript,这很糟糕。

任何建议,将不胜感激。提前致谢。