Как интерполировать оттенок с помощью градиента svg?

Question

Я хотел бы в форму СВГ с градиентом, который идет от hsl(0, 100%, 50%) к hsl(360, 100%, 50%), где оттенок работает плавно от 0 -> 360, чтобы создать что-то вроде:

Когда я делаю градиент с эти стопорные цвета:

<linearGradient id="Gradient1"> 
    <stop offset="0%" stop-color="hsl(0, 100%, 50%)"/> 
    <stop offset="100%" stop-color="hsl(360, 100%, 50%)"/> 
</linearGradient> 

... это приводит к полностью красным градиентом

Я сумел hack around слегка добавив мор e:

<linearGradient id="Gradient2"> 
    <stop offset="0%" stop-color="hsl(0, 100%, 50%)"/> 
    <stop offset="1%" stop-color="hsl(3, 100%, 50%)"/> 
    <stop offset="2%" stop-color="hsl(7, 100%, 50%)"/> 
    <!-- Lots more --> 
    <stop offset="98%" stop-color="hsl(352, 100%, 50%)"/> 
    <stop offset="99%" stop-color="hsl(356, 100%, 50%)"/> 
</linearGradient> 

Хотя кажется довольно уродливым.

Есть ли лучший способ сделать это?

Answer 1

Цветовая интерполяция в SVG выполняется с использованием цветового пространства sRGB (хотя вы должны иметь возможность указать linearRGB, но я не думаю, что он хорошо поддерживается), поэтому вы не можете делать то, что хотите - эти цвета HSL преобразуются до sRGB, прежде чем они будут интерполированы.

(И технически HSL цвета не поддерживаются в SVG 1.1 - так в то время как это работает в Chrome, не удивляйтесь, если он не работает везде)

Answer 2

Полный градиент HSL 0 - 360

Устанавливая Упоры цвета на 10% я получить форму, близкую к изображению:

<svg height="100%" viewBox="0 0 100 20"> 
 
    <defs> 
 
    <linearGradient id="Gradient2"> 
 
     <stop offset="0%" stop-color="hsl(0, 100%, 50%)" /> 
 
     <stop offset="10%" stop-color="hsl(36, 100%, 50%)" /> 
 
     <stop offset="20%" stop-color="hsl(72, 100%, 50%)" /> 
 
     <stop offset="30%" stop-color="hsl(108, 100%, 50%)" /> 
 
     <stop offset="40%" stop-color="hsl(144, 100%, 50%)" /> 
 
     <stop offset="50%" stop-color="hsl(180, 100%, 50%)" /> 
 
     <stop offset="60%" stop-color="hsl(252, 100%, 50%)" /> 
 
     <stop offset="70%" stop-color="hsl(236, 100%, 50%)" /> 
 
     <stop offset="80%" stop-color="hsl(288, 100%, 50%)" /> 
 
     <stop offset="90%" stop-color="hsl(324, 100%, 50%)" /> 
 
     <stop offset="100%" stop-color="hsl(360, 100%, 50%)" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <line stroke-width="16" stroke-linecap="round" stroke="url(#Gradient2)" x1="10" y1="10" y2="10.1" x2="90" /> 
 
</svg>

Если вы хотите см., как останавливаются цвета на 1%, является скрипта, созданная Harry:
Fiddle

Включено в сравнение с 10% -ыми остановками.

Если вы считаете, что существует множество цветов остановки, вы можете использовать javascript для добавления каждого элемента stop. Но я думаю, что просто добавление их вручную - это лучший aproach в целом.