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:

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.

Answer 2

    <linearGradient
   id="linearGradient3706">
  <stop
     style="stop-color:#ff1c1c;stop-opacity:1;"
     offset="0"
     id="stop3708" />
  <stop
     id="stop3728"
     offset="0.16105497"
     style="stop-color:#fd00ca;stop-opacity:1;" />
  <stop
     id="stop3724"
     offset="0.35173747"
     style="stop-color:#0202ff;stop-opacity:1;" />
  <stop
     id="stop3720"
     offset="0.48789391"
     style="stop-color:#02fff9;stop-opacity:1;" />
  <stop
     id="stop3718"
     offset="0.70091939"
     style="stop-color:#60ff18;stop-opacity:1;" />
  <stop
     id="stop3714"
     offset="0.83720928"
     style="stop-color:#ffef15;stop-opacity:1;" />
  <stop
     style="stop-color:#ff0000;stop-opacity:1;"
     offset="1"
     id="stop3710" />
</linearGradient>

works for me (made with inskape)

Answer 3

If it's acceptable to generate the SVG with Javascript you might want to look at: How to interpolate hue values in HSV colour space?

or perhaps:

http://www.carto.net/papers/svg/gui/colourPicker/

Edit: Actually there is one here. would that be correct?

http://upload.wikimedia.org/wikipedia/commons/5/5d/HSV-RGB-comparison.svg