Создать переменный градиент в SVG

Question

Возможно ли создать переменный градиент с объектами SVG? Вот что я пытаюсь сделать:

У меня есть горизонтальная гистограмма, и я хочу применить к ней затенение. Таким образом, самый верхний бар будет иметь большую затенение, а панель после этого меньше затенения и так далее. Однако количество баров является переменной.

Я не хочу создавать градиент для каждого бара (плюс с переменным числом баров, которые сильно), то, что я хотел бы сделать, это использовать один градиент для каждого бара. В инструкции selectall можно изменить градиент, который находится в разделе def? Что-то вроде:

.attr("stop-color", function(d,i) "rgb("+50*i+","+50*i+","+50*i+")")"?

Я думаю, что мне нужно указать имя градиента где-нибудь. Возможно ли это?

Answer 1

Если вы хотите иметь градиент, который применяется к группе объектов, то да. Это возможно. Вам просто нужно определить градиент с абсолютными координатами. Для этого используйте gradientUnits="userSpaceOnUse".

Ниже я определяю градиент, который начинается с (0,0) и переходит к (0,400). Все объекты, которые падают между y = 0 и y = 400, будут нарисованы с использованием соответствующей части этого градиента.

<svg width="400px" height="400px"> 
 
    <defs> 
 
    <linearGradient id="mygradient" gradientUnits="userSpaceOnUse" 
 
        x1="0" y1="0" x2="0" y2="400"> 
 
     <stop offset="0" stop-color="red"/> 
 
     <stop offset="1" stop-color="blue"/> 
 
    </linearGradient> 
 
    </defs> 
 
    
 
    
 
    
 
    <g fill="url(#mygradient)" stroke="black" stroke-width="4"> 
 

 
    <rect x="5" y="5" width="390" height="90"/> 
 
    <rect x="5" y="105" width="390" height="90"/> 
 
    <rect x="5" y="205" width="390" height="90"/> 
 
    <rect x="5" y="305" width="390" height="90"/> 
 

 
    </g> 
 

 
</svg>