Есть ли способ сделать градиент angular в SVG?
(Я не знаю официального термина - это тот вид градиента, который вы видите в цветовых подборщиках, где он изменяется по углу.)
SVG, похоже, поддерживает только линейные и радиальные градиенты, но я думаю, что может быть какой-то способ использовать преобразование для имитации того, что я хочу.
спасибо!
Нет стандартной поддержки для angular (конических) градиентов.
Но см. http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient для некоторых методов приближения (хотя исходный код не включен). Примеры этой ссылки не работают.
В моем ответе на этот похожий вопрос я использовал шесть линейных градиентов для приближения конического градиента. Если вам нужен только градиент для штриха/периметра круга, а не заливка, то это должно быть достаточно хорошим приближением.
Вот как это сделать, используя шаблоны: 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>http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg использует инновационный метод для его приближения.
Вот возможный векторный конический градиент, но только VML (+ IE) может это сделать...:
Если вы покопаетесь в этой странице, вы найдете код, который приближает конический градиент в SVG, нарисовав его в виде серии дуг в 1 градус.
