如何用模式

Question

我有一些SVG元素，其中已经应用了一些模式。该图案用作填充颜色。这意味着该模式填满了整个SVG元素。基本上我想用模式部分填充我的元素。

示例

应用模式后：

我希望这个模式适用于圆圈的下半部分。有没有办法做到这一点？

Answer 1

您可以做的是创建两个圈，并在fill

上应用mask

＆＃13;

＆＃13;

<svg width="105px" height="105px">
  <mask x="0" y="0" id="half">
    <rect y="50%" fill="white" width="100%" height="50%" />
  </mask>
  
  <circle fill="transparent" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
  <circle fill="#C04C4C" mask="url(#half)" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用类似的东西

<svg  height="300" width="300">
<defs>
<linearGradient id="Gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="50%" stop-color= "white" />
<stop offset="51%" stop-color= "red" />
</linearGradient>
<linearGradient id="repeat"xlink:href="#Gradient-1" spreadMethod="repeat" />
</defs>
 
<circle cx="100" cy="100" r="100"
      fill= "url(#repeat)"
      stroke="#000000"
      stroke-width="1px" />
</svg>