Fill SVG element with repeating linear gradient color
I have an SVG element - a rectangle.
Now, to color this element, I am using an attribute fill
that works with any color.
Now I am trying to assign the color of the stripes to it using this property
fill: repeating-linear-gradient(-45deg, #cc2229, #ffffff 4px, #cc2229 2px, #ffffff 8px);
This works for regular DOM elements when assigned to an attribute background
.
BUT, THIS DOESN'T WORK WITH THE SVG ELEMENT.
How can I achieve this?
- this is how I am trying to make my SVG element look like (I am using d3.js)
+3
source to share
2 answers
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>
+1
source to share
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>
+7
source to share