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>

Answer 2

http://jsfiddle.net/mcab43nd/1/ - solution is here

Thanks to Lars and AmeliaBR

Here is the code

<svg>

<defs>
   <linearGradient id="Gradient-1"x1="3%" y1="4%" x2="6%" y2="6%">
     <stop offset="0%" stop-color= "red" />
     <stop offset="50%" stop-color= "white" />
   </linearGradient>

   <linearGradient id="repeat"xlink:href="#Gradient-1"spreadMethod="repeat" />
</defs>

<rect x="30" y="10"
      width="200" height="100"
      fill= "url(#repeat)"
      stroke="red"
      stroke-width="2px" />
</svg>