Home/ Questions/Q 987651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T05:30:48+00:00

(source: elv1s.ru ) What a proper way to do a gradient like this? I

  • 0

SVG linear gradient
(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:

SVG linear gradient
(source: elv1s.ru)

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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