Reputation: 1301

SVG angular gradient

Is there a way to do an 'angular gradient' in SVG?

(I don't know the official term -- it's the kind of gradient you see in color-pickers, where it varies by angle.)

SVG seems to support only linear and radial gradients, but I'm thinking there might be some way to use a transform to simulate what I want.

thanks!

Upvotes: 38

Answers (8)

Alex Dickson

Reputation: 47

Add a patern with 100% width and height so its just a one repetition pattern

<div style="width:100px">
    <svg viewBox="0 0 35 35" style="transform: scale(1) rotate(-90deg)">
        <defs>
          <pattern
            id="p1"
            patternUnits="userSpaceOnUse"
            width="100%"
            height="100%"
            patternTransform="rotate(90)"
          >
            <image href="https://blogs.igalia.com/dpino/files/2020/06/conic-gradient.png" width="36" height="36" />
          </pattern>
        </defs>
        <g>
          <circle
            cx="50%"
            cy="50%"
            stroke-width="2"
            r="15.915"
            stroke-dasharray="89, 100"
            stroke="url(#p1)"
            fill="none"
          />
        </g>
      </svg>
  </div>

Upvotes: 1

Eastonium

Reputation: 323

...10 years later...

CSS now supports conical gradients, although browser support is mixed at the time of writing this.

You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect.

https://codepen.io/eastonium/pen/abOpdEm

Upvotes: 20

prozorov

Reputation: 131

Here is how to do it using patterns: https://jsfiddle.net/prozoroff/8eodzrke/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
    <defs>
        <linearGradient id="Gradient1" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#ff0000"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <linearGradient id="Gradient2" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#0000ff"/>
            <stop offset="100%" stop-color="#00ff00"/>
        </linearGradient>
        <pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
            <g transform="rotate(0, 300, 300)">
                <rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
                <rect shape-rendering="crispEdges"  x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
            </g>
       </pattern>
  </defs>
  <path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>

Upvotes: 9

Dr. Pain

Reputation: 719

If you dig into this page, you'll find code that approximates a conic gradient in SVG by drawing it as a series of 1 degree arcs.

Upvotes: 1

kennytm

Reputation: 523304

There's no standard support to do angular (conical) gradients.

But see http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient for some approximation methods (source code not included, though). Examples on that link do not work.

Upvotes: 12

Paul LeBeau

Reputation: 101820

In my answer to this similar question, I used six linear gradients to approximate a conical gradient. If you are only needing the gradient for the stroke/perimeter of a circle, rather than the fill, then it should be a good enough approximation.

svg multiple color on circle stroke

Upvotes: 4