Fill SVG element with a repeating linear gradient color

Question

I have an SVG element - a rectangle.

Now, to color this element, I use fill attribute that works with any color.

Now, I am trying to give it a stripes color by using this property

fill: repeating-linear-gradient(-45deg, #cc2229, #ffffff 4px, #cc2229 2px, #ffffff 8px);

This works for normal DOM elements when assigned to background attribute.

But, IT DOESN'T WORK WITH SVG ELEMENT.

How can i achieve that?

- this is how i am trying my SVG element to look like (I am using d3.js)

Answer 1

Much better solution:

http://jsfiddle.net/mcab43nd/14/

<svg>

<defs>

  <pattern id="pattern"
           width="8" height="10"
           patternUnits="userSpaceOnUse"
           patternTransform="rotate(45 50 50)">
    <line stroke="#a6a6a6" stroke-width="7px" y2="10"/>
  </pattern>

</defs>

<rect x="5" y="5"
      width="1000" height="25"
      fill= "url(#pattern)"
      opacity="0.4"
      stroke="#a6a6a6"
      stroke-width="2px" />

</svg>