Question

我在svg中有一些模式我应用到我的rect，代码就像这样

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
  <defs> 
    <rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>    
    <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
      <use xlink:href="#unitsqr" />
    </pattern>
  </defs>
  <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>

我想在raphael中做一些动画，但也保留我的网格，我不知道如何在raphael中创建一个模式并在以后用它作为填充。有没有办法做到这一点？

Answer 1

当你Element.attr("fill", "http://example.com/example.png")时，Raphaël会创建一个＆lt; pattern＆gt;如果使用SVG后端，你在引擎盖下的元素。但Raphaël中没有高级API支持来创建和操作模式填充。所以，要么你需要扩展Raphaël，要么你可以用普通的js来做，假设你不关心IE8及更低版本的VML后备。

Answer 2

正确的语法是

Element.attr("fill" , "url(http://exmaple.com/example.png)") ;

你可以通过使用Raphael.path或Raphael.circle创建一个元素并将填充设置为url来做一些时髦的东西，例如填充创建形状像圆形或路径的图像。

使用raphael在svg中创建模式元素

2 个答案: