SVG линейный градиент от оттенка 0 до 360 - PullRequest
10 голосов
/ 07 августа 2010

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

Я вижу разницу между этими двумя градиентами. Есть ли лучший способ сделать это?

Ответы [ 3 ]

1 голос
/ 11 августа 2010

Если допустимо генерировать SVG с Javascript, вы можете посмотреть: Как интерполировать значения оттенков в цветовом пространстве HSV?

или, возможно:

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

Редактировать: На самом деле есть один здесь. это будет правильно?

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

0 голосов
/ 30 августа 2010

Вы пытались использовать лучшую точность в%? Как показывает Джош, вы можете иметь точность менее процента и лучше распределять свои остановки.

0 голосов
/ 07 августа 2010
    <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>

у меня работает (сделано с инскапе)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...