1

我在 svg 中有一些模式应用于我的矩形，代码是这样的

<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 中创建图案并稍后将其用作填充。有没有办法做到这一点？

4

2 回答 2

1

当你这样做时，Element.attr("fill", "http://example.com/example.png")如果使用 SVG 后端，Raphaël 会在后台为你创建一个 <pattern> 元素。但是 Raphaël 中没有用于创建和操作图案填充的高级 API 支持。所以，要么你需要扩展 Raphaël，要么你可以用普通的 js 来做，假设你不关心 IE8 及更低版本的 VML 回退。

于 2013-03-01T10:08:09.363 回答
0

正确的语法是

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

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

于 2014-09-26T20:37:22.150 回答