Подтвердить что ты не робот

Svg несколько цветов по кругу

Я хочу создать круг радуги

как показано на рисунке ниже:

но как я могу нарисовать кривый и множественный градиент остановки цвета?

вот мой текущий код:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="test">
<stop offset="0%" stop-color="#f00"/>
<stop offset="100%" stop-color="#0ff"/>
</linearGradient>

</defs>

<circle cx="50" cy="50" r="40" fill="none" stroke="url(#test)" stroke-width="6"/>

</svg>

Ответ 1

Этот подход не будет работать. SVG не имеет конических градиентов. Чтобы имитировать эффект, вам придется подделать его с большим количеством небольших сегментов. Или какой-то подобный метод.

Update:

Вот пример. Я приближаю 360-градусный оттенок с шестью путями. Каждый путь содержит дугу, которая охватывает 60deg круга. Я использую линейный градиент для интерполяции цвета от начала до конца каждого пути. Это не идеально (вы можете видеть некоторые разрывы, где coloursmeet), но это, возможно, обманет большинство людей. Вы можете увеличить точность, используя более шести сегментов.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="-10 -10 220 220">
      <defs>
        <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#ff0000"/>   
            <stop offset="100%" stop-color="#ffff00"/>   
        </linearGradient>
        <linearGradient id="yelgre" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffff00"/>   
            <stop offset="100%" stop-color="#00ff00"/>   
        </linearGradient>
        <linearGradient id="grecya" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#00ff00"/>   
            <stop offset="100%" stop-color="#00ffff"/>   
        </linearGradient>
        <linearGradient id="cyablu" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#00ffff"/>   
            <stop offset="100%" stop-color="#0000ff"/>   
        </linearGradient>
        <linearGradient id="blumag" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#0000ff"/>   
            <stop offset="100%" stop-color="#ff00ff"/>   
        </linearGradient>
        <linearGradient id="magred" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stop-color="#ff00ff"/>   
            <stop offset="100%" stop-color="#ff0000"/>   
        </linearGradient>
      </defs>
    
      <g fill="none" stroke-width="15" transform="translate(100,100)">
        <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#redyel)"/>
        <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#yelgre)"/>
        <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#grecya)"/>
        <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cyablu)"/>
        <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#blumag)"/>
        <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#magred)"/>
      </g>
    </svg>