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

时间:2015-01-13 01:56:06

标签: css svg

如何(或有办法)在CSS中定义SVG填充模式,以便在SVG中使用?我可以在HTML中这样做:

CSS:

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

HTML:

<div class="some-class-for-html">
  Blah blah blah
</div>

我想做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==");    
}

SVG:

<rect class="some-class-for-svg" x="0" y="0" width="100" height="100">

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

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

0 个答案:

没有答案