Fill SVG shape with another SVG shape

fill, shapes, svg

Solution

You want to use an SVG Pattern. See this example:

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

Note that:

The `viewBox` of the `<pattern>` will clip what is drawn. (As seen in the example, the top stroke and top-left corner each triangle is slightly hidden.)

When the `viewBox` is a different size from the `width` and `height` you are effectively scaling the size of the graphic(s) in your pattern. (The example scales the 7-unit-wide triangle in the pattern up by a factor of 10, such that only 7 of them—plus padding—are visible across the width of a 700-unit-wide ellipse.)

Problem

Original source