Raphael 元素中的重复模式

Question

有没有办法让重复的图案作为 Raphael 元素的背景？

特别是，我可以在填充颜色上叠加一个半透明的 .png 吗？ （或者替代方法可能是为图像设置剪辑路径（不是矩形））

Answer 1

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

首先创建一个pattern，然后在该模式中放入您想要重复的image。为该图案指定一个 ID，并将该 ID 用作您需要平铺的形状的 IRI in the fill value。

要也有一个默认背景，你只需要在它后面有另一个与你想要的背景相同的形状。

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

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