@fabledva
frontend-developer, junior

Можно ли сделать динамический градиент для path (SVG)?

Всем привет
Вопрос в следующем:
Есть дерево связей, представленное в виде графа на svg
Один узел может быть одного цвета, в зависимости от приходящих данных, а второй, соответственно, совершенно другого (Пример на скрине)
5a70348923536132696389.png
Можно ли как-то связать 2 узла и path, чтобы fill принимал значение линейного градиента цветов связанных узлов?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 2
  • vahe_2000
    @vahe_2000
    что то вроде этого ? jsfiddle
    <svg width={580} height={400}>
    	<defs>
    		<linearGradient y2={0} x2={1} y1={0} x1={0} id="a">
    			<stop offset="0%" stopColor="#88bf76" />
    			<stop offset="90%" stopColor="#eb8a77" />
    		</linearGradient>
    	</defs>
    	<rect fill="#fff" height={402} width={582} y={-1} x={-1} />
    	<g>
    		<line
    			stroke="url(#a)"
    			strokeLinecap="undefined"
    			strokeLinejoin="undefined"
    			y2={30}
    			x2="401.49999"
    			y1={29}
    			x1={29}
    			strokeWidth="5.5"
    			fill="none"
    		/>
    	</g>
    </svg>
    ice_screenshot_20180130-141419_xbzvjw.pn
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы