title: SVG - Pattern with image background - images do not fill the same - adapt to the shape they are contained in
body: <p>I am trying to get areas of states to fill up based off certain criteria. I have a pattern and it is working, but it seems like the pattern fills up the territory based off the shape of the territory. I want to have the lines the same when they fill every single shape. You can see in the map below that the lines are not at the same degree nor are they the same size in each state. Is this possible? I am new to SVG. </p>
  
  <p><a href="https://i.stack.imgur.com/RZPKn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RZPKn.png" alt="enter image description here"></a></p>
  
  <p>Patterns: </p>
  
  <pre><code>&lt;defs&gt;
      &lt;pattern id="pattern-stripe" width="5" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(75)"&gt;
          &lt;rect width="2" height="4" transform="translate(0,0)" fill="white"&gt;&lt;/rect&gt;
      &lt;/pattern&gt;
      &lt;mask id="mask-stripe"&gt;
          &lt;rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" /&gt;
      &lt;/mask&gt;   
      &lt;pattern id="other" height="100%" width="100%" patternContentUnits="objectBoundingBox"&gt;
          &lt;image height="10" width="10" preserveAspectRatio="none" xlink:href="images/other-stripe.png" /&gt;
      &lt;/pattern&gt;
      &lt;pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox"&gt;
          &lt;image height="10" width="10" preserveAspectRatio="none" xlink:href="images/blue-stripe.png" /&gt;
      &lt;/pattern&gt;
      &lt;pattern id="orange" height="100%" width="100%" patternContentUnits="objectBoundingBox"&gt;
          &lt;image height="10" width="10" preserveAspectRatio="none" xlink:href="images/orange-stripe.png" /&gt;
      &lt;/pattern&gt;
  
  
  &lt;/defs&gt;
  </code></pre>