svg - SVG シェイプを別の SVG シェイプで塗りつぶす

Question

ある SVG 形状を別の形状の塗りつぶしとして使用することはできますか?

Answer 1

SVG パターンを使用したい。この例を参照してください。

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

ご了承ください：

• のviewBoxは、<pattern>描かれたものを切り取ります。(例に見られるように、各三角形の上部のストロークと左上隅はわずかに隠されています。)

• がviewBoxとは異なるサイズでありwidth、heightパターン内のグラフィックのサイズを効果的にスケーリングしている場合。(この例では、パターン内の幅 7 単位の三角形を 10 倍に拡大して、幅 700 単位の楕円の幅全体にそのうちの 7 つとパディングのみが表示されるようにします。)