用另一个 SVG 形状填充 SVG 形状答案

【问题标题】：Fill SVG shape with another SVG shape用另一个 SVG 形状填充 SVG 形状
【发布时间】：2012-06-11 21:40:52
【问题描述】：

是否可以使用一个 SVG 形状作为另一个形状的填充？

【问题讨论】：

这与绘制两个 SVG 形状有什么不同，其中一个在另一个形状内有位置？

【解决方案1】：

<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="100" height="100"
             viewBox="0 0 10 10" >
      <path d="M0,0 L7,0 L3.5,7 z" fill="red" stroke="blue" />
    </pattern> 
  </defs>

  <!-- The ellipse is filled using a triangle pattern paint server
       and stroked with black -->
  <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"  
           cx="400" cy="200" rx="350" ry="150" />
</svg>

注意：

<pattern> 的viewBox 将剪切绘制的内容。（如示例中所示，每个三角形的顶部笔划和左上角都被稍微隐藏了。）
当viewBox 与width 和height 的大小不同时，您实际上是在缩放图案中图形的大小。（该示例将图案中 7 个单位宽的三角形放大了 10 倍，这样，在 700 个单位宽的椭圆的宽度上，只有 7 个（加上填充）可见。）

【讨论】：