SVG线性渐变从色调0到360

Question

SVG线性梯度http://elv1s.ru/files/svg/gradient-hue.png

这样做一个渐变的正确方法是什么？我试过这个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>

它有效,但仍然不够好:

SVG线性梯度http://elv1s.ru/files/svg/gradient-hue-reference.png

我可以看到这两个渐变之间的区别.有没有更好的方法呢？

Answer 1

如果可以使用 Javascript 生成 SVG，您可能需要查看：How to interpolate Hue Values in HSV color space?

也许：

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

编辑：实际上这里有一个。那是正确的吗？

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