Javascript 拉斐尔元素中的重复模式

有没有一种方法可以将重复的图案作为拉斐尔元素的背景

---

特别是，我可以在填充颜色的顶部覆盖一个半透明的.png吗？（或者另一种方法是为图像设置剪辑路径（而不是rect）

以下是将中继器模式作为背景的SVG解决方案。你可以从那里开始工作

首先，创建一个模板，并在该模板中放置要重复的模板。为该图案指定一个ID，并将该ID用作需要平铺的形状的标识

若要拥有默认背景，您只需在其后面有另一个与您想要的背景相同的形状

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 800 400" 
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="myTile" patternUnits="userSpaceOnUse"
             x="0" y="0" width="20" height="20"
             viewBox="0 0 20 20" >
      <image x="0" y="0" width="20px" height="20px" xlink:href="tile.png" />
    </pattern> 
  </defs>

  <rect x="0" y="0" fill="Red" width="800" height="400">
  </rect>
  <ellipse fill="url(#myTile)" stroke="black" stroke-width="5"  
        cx="400" cy="200" rx="350" ry="150" />
</svg>

---

警告：运行上面的示例可能会伤害您的眼睛。

这看起来很好-我还不能尝试，尽管我的老板告诉我填充图案可以等到稍后更新-raphael v2现在支持背景图像，可能会重复