使用拉斐尔在svg中创建一个模式元素

Creating a pattern element in svg using raphael

本文关键字：一个 元素 模式 创建 svg      更新时间：2023-09-26

我在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>

我想在拉斐尔中做一些动画，但也保留我的网格，我不知道如何在拉斐尔中创建图案，并在以后将其用作填充。有办法做到这一点吗？

当您执行Element.attr("fill", "http://example.com/example.png")时，Raphaël会创建一个<pattern>元素，如果使用SVG后端的话。但是在Raphaël中没有用于创建和操作模式填充的高级API支持。因此，您要么需要扩展Raphaël，要么可以使用纯js来实现，假设您不关心IE8及更低版本的VML回退。

正确的语法应该是

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

通过使用Raphael.path或Raphael.circle创建元素并将填充设置为url，您可以轻松地完成一些有趣的事情，比如填充创建一个圆形或路径形状的图像。

相关文章：