@fabledva
Мутирующий гибрид недотимлида и недоскрам-мастера

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

Всем привет
Вопрос в следующем:
Есть дерево связей, представленное в виде графа на svg
Один узел может быть одного цвета, в зависимости от приходящих данных, а второй, соответственно, совершенно другого (Пример на скрине)
5a70348923536132696389.png
Можно ли как-то связать 2 узла и path, чтобы fill принимал значение линейного градиента цветов связанных узлов?
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ответы на вопрос 2
theykillimmortal
@theykillimmortal
Здравствуйте.
Лучший способ - это использовать `linearGradient`.
Ссылка на документацию, а также примеры на d3.js: пример с path и пример с rect.

Надеюсь это Вам помогло.
Ответ написан
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
Похожие вопросы