경로 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

fills는 linear 요소가 아니라 defs 요소를 가리 킵니다. id = "gradient"는 linearGradient 요소에 있어야합니다 - 또는 채우기 URL을 지정하십시오 (#Yellow)