LinearGradient用于路径SVG

Question

我需要填充使用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)');`

Answer 1

您的填充指向defs元素而不是linearGradient。 id =“gradient”应该在linearGradient元素上 - 或者也可以填充url（#yellow）