路径 SVG 的 LinearGradient答案

【问题标题】：LinearGradient for path SVG路径 SVG 的 LinearGradient
【发布时间】：2012-04-30 20:47:49
【问题描述】：

我需要填写一个使用 javascript 动态创建的路径。我为此创建了一个渐变并用它来填充我的路径，但什么也没发生。我的代码有什么问题？

$('svg').prepend('<defs id="gradient"></defs>');
$('#gradient').append('<linearGradient id="yellow" x1="0%" y1="0%" x2="100%" y2="0%">  </linearGradient>');
$('#yellow').append('<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />');
$('g:nth-child(2n+1) path').attr('fill','url(#gradient)');`

【问题讨论】：

标签： path svg linear-gradients

【解决方案1】：

您的填充指向一个 defs 元素而不是线性渐变。 id="gradient" 应该在 linearGradient 元素上 - 或者使填充 url(#yellow)

【讨论】：