CODEWITHSUNDEEP
javascripthtmlcsssvgd3.js
Ashima
Ashima

Reputation: 4824

Fill SVG element with a repeating linear gradient color

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?

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

Upvotes: 15

Views: 10484

Answers (2)

Ashima
Ashima

Reputation: 4824

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>

Upvotes: 6

LexDiamonds
LexDiamonds

Reputation: 271

Much better solution:

<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>

Upvotes: 27

Related Questions