title: Fill SVG element with a repeating linear gradient color
body: <p>I have an SVG element - a rectangle.</p>
  
  <p>Now, to color this element, I use <code>fill</code> attribute that works with any color.</p>
  
  <p>Now, I am trying to give it a stripes color by using this property</p>
  
  <pre><code>fill: repeating-linear-gradient(-45deg, #cc2229, #ffffff 4px, #cc2229 2px, #ffffff 8px);
  </code></pre>
  
  <p>This works for normal DOM elements when assigned to <code>background</code> attribute.</p>
  
  <p>But, IT DOESN'T WORK WITH SVG ELEMENT.</p>
  
  <p>How can i achieve that?</p>
  
  <p><img src="https://i.stack.imgur.com/sKLEL.png" alt="enter image description here"> - this is how i am trying my SVG element to look like (I am using d3.js)</p>