SVG linear gradient from hue 0 to 360

Question

_{(source: elv1s.ru)}

What a proper way to do a gradient like this? I tried this SVG:

<linearGradient id="hue" x1="0" y1="1" x2="0" y2="0">
    <stop offset="0%" stop-color="#ff0000"/>
    <stop offset="17%" stop-color="#ffff00"/>
    <stop offset="34%" stop-color="#00ff00"/>
    <stop offset="50%" stop-color="#00ffff"/>
    <stop offset="66%" stop-color="#0000ff"/>
    <stop offset="82%" stop-color="#ff00ff"/>
    <stop offset="100%" stop-color="#ff0000"/>
</linearGradient>

It works, but still not good enough:

_{(source: elv1s.ru)}

I can see the difference between those two gradients. Is there a better way of doing it?

Answer 1

Have you tried using better precision in your %? As Josh is showing, you can have sub-percent precision and space your stops better.