Raphael元素中的重复模式

Question

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

特别地，我能否在填充颜色上叠加半透明的.png文件？（或者另一种选择是使用图像的裁剪路径（不是矩形））

- wheresrhys

---

可能是重复的问题：如何用背景图片填充SVG路径元素？ - wheresrhys

Answer 1

这是实现背景重复图案的SVG解决方案。您可以从那里开始操作。

首先创建一个图案，在该图案中放置您想要重复的图片。给该图案一个ID，并将该ID用作需要平铺的形状中fill值的IRI。

为了同时拥有默认背景，您只需要在其后面添加另一个相同的形状，并设置所需的背景。

<?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>

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

- Alin Purcaru

---

这看起来很不错 - 不过我暂时还不能尝试，因为我的老板告诉我图案填充可以等到以后再做。 - wheresrhys

更新 - Raphael v2 现在支持背景图片 http://jsfiddle.net/wheresrhys/7NXbw/ - wheresrhys