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>

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

拉斐尔元素中的重复模式

1 个答案: