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 回答