svg里面有时候会用pattern去写一个背景图片,然后在其他元素里面去使用fill: url(#patternId)来调用它,这样就可以实现在一个svg里面定义自己的背景图片,而且还可以使用svg来画这种背景图。

但是有一个问题是,在IE里面,fill调用不支持style属性中使用,比如下面的无效代码:

<rect style="fill: url(#patternId)">

在Chrome下是正常的,但是在IE中使用的时候,没法正常显示,而你需要将fill属性改为attr:

<rect fill="url(#patternId)">

这样才能正常显示你想要的背景图效果。

2017-06-13 16:51:31