SVG угловой градиент - PullRequest
Новая
       7

SVG угловой градиент

17 голосов
/ 17 марта 2010

Есть ли способ сделать «угловой градиент» в SVG?

(я не знаю официального термина - это вид градиента, который вы видите в палитрах цветов, где он меняется под углом.)

SVG, кажется, поддерживает только линейные и радиальные градиенты, но я думаю, что может быть какой-то способ использовать преобразование для симуляции того, что я хочу.

спасибо!

Ответы [ 6 ]

8 голосов
/ 17 марта 2010

Нет стандартной поддержки для выполнения угловых (конических) градиентов.

Но см. http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient для некоторых методов аппроксимации (хотя исходный код не включен). Примеры по этой ссылке не работают.

5 голосов
/ 01 июня 2014

В своем ответе на этот похожий вопрос я использовал шесть линейных градиентов для аппроксимации конического градиента. Если вам нужен только градиент для обводки / периметра круга, а не заливки, то это должно быть достаточно хорошим приближением.

svg многоцветный на круговом ходу

1 голос
/ 27 декабря 2017

Вот как это сделать, используя шаблоны: 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>
1 голос
/ 10 июля 2011

Вот возможный векторный конический градиент, но только VML (+ IE) может это сделать ...:

http://midiwebconcept.free.fr/Demos/degradeconique.htm

1 голос
/ 05 апреля 2011

http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg использует инновационную технику для аппроксимации.

0 голосов
/ 16 июля 2018

Если вы углубитесь в эту страницу , вы найдете код, который приближает конический градиент в SVG, нарисовав его в виде серии дуг в 1 градус.

...