从0到360的SVG线性渐变 [英] SVG linear gradient from hue 0 to 360

问题描述

SVG线性渐变http://elv1s.ru/files/svg/gradient-hue .png

做这种渐变的正确方法是什么？我尝试了这个SVG ：

< linearGradient id =huex1 =0y1 =1x2 =0y2 =0> 
  
  
  
  
  
  
  
 < / linearGradient> 

它可以工作，但仍然不够好：

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

我可以看到这两个渐变之间的差异。有没有更好的方法来做到这一点？

解决方案

如果用Javascript生成SVG是可以接受的，你可能想看看： 如何插入HSV色彩空间中的色相值？

或者：

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

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

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

SVG linear gradient http://elv1s.ru/files/svg/gradient-hue.png

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:

SVG linear gradient http://elv1s.ru/files/svg/gradient-hue-reference.png

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

解决方案

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

这篇关于从0到360的SVG线性渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！