CODEWITHSUNDEEP
csssvg
IceRevenge
IceRevenge

Reputation: 1583

Diagonal hatchings for SVG-elements

I want to add diagonal colored hatchings to polygons in svg using css. I know you could use patterns but I am concerned about performance issues when there are too many different patterns that's why I'd rather use css. I found the repeating-linear-gradient but wasn't able to get it to work on svg elements. Is that possible? If not, are there any other ways in css to add diagonal hatchings to svg elements?

Upvotes: 0

Views: 122

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

In general browsers do not currently support adding CSS gradients to SVG elements.

You would need to use SVG <linearGradient> elements instead.

Here's an example.

<svg width="300" height="300">
  <defs>
    <linearGradient id="hatch1"
                    gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="10" y2="10"
                    spreadMethod="repeat">
      <stop offset="0%" stop-color="transparent"/>
      <stop offset="90%" stop-color="transparent"/>
      <stop offset="90%" stop-color="green"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>

  <circle cx="150" cy="150" r="100" fill="url(#hatch1)" stroke="blue"/>
</svg>

Upvotes: 1

Related Questions