Градиент SVG как фон штриха полилиний с абсолютным положением

Есть ли возможность установить абсолютное положение градиентного фона, применяемого к полилинии?

Например, когда я устанавливаю градиент:

<filter id="black-glow">
    <feColorMatrix type="matrix" values=
       "0 0 0 0   0        
        0 0 0 0   0
        0 0 0 0   0
        0 0 0 1   0" />
    <feGaussianBlur stdDeviation="3" result="coloredBlur" />
    <feMerge>
      <feMergeNode in="coloredBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

к штриху полилинии:

<polyline points="50,350 ... 350,239" style="fill:none;" stroke="url(#grad1)" stroke-width="3" stroke-linecap="round" />

(полилиния имеет максимальное/минимальное положение точек)

Результат в порядке:

введите здесь описание изображения

Но, когда полилиния плоская:

введите здесь описание изображения

Зеленый цвет намного выше. Поскольку это цветная диаграмма, мне нужно добиться постоянно просматриваемого фона, независимо от того, как рисуется полилиния.


svg linear-gradients polyline
person Bresiu    schedule 20.04.2015    source источник
comment
Вы можете дать нам jsfiddle?   -  person Yves Lange    schedule 20.04.2015
comment
конечно, jsfiddle.net/azuL1ets   -  person Bresiu    schedule 20.04.2015
comment
Понимаете. Простой jsfiddle помогает;)   -  person Yves Lange    schedule 20.04.2015

Ответы (1)


arrow_upward
4
arrow_downward

Если вы хотите, чтобы градиент применялся в пользовательском пространстве, это возможно, выразив градиент следующим образом:

<linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0"
                y1="350" x2="0" y2="220">

См. скрипку.

Значения в x1, y1, x2 и y2 будут относиться к текущей системе координат пользовательского пространства, поэтому, если вы используете проценты, они будут относиться к ближайшему экрану просмотра, а не к ограничивающей рамке формы, использующей градиент. Подробнее см. в спецификации svg.

person Erik Dahlström    schedule 20.04.2015
comment
Спасибо, это работает. Я видел документацию и попробовал «objectBoundingBox» вместо «userSpaceOnUse», и возникла проблема (диаграмма не была видна). Я понял, что проблема в другом фильтре. - person Bresiu; 20.04.2015