jquery append in svg

Question

Ich habe eine generierte Svg, die ich versuche zu zielen und style mit einem Gradienten nach https://www.w3schools.com/graphics/svg_grad_linear.asp. Daher versuche ich, die Tags 'def', 'linearGradient' und 'stop' mit Attributen mit .append zu versehen. Dies ist, was ich habe zur Zeit

this.body.append("svg:defs") 
     .attr("cx","50%") 
     .attr("cy","50%") 
     .attr("fx","50%") 
     .attr ("fy","50%") 
     .attr ("id","MyGradient") 
     .append("radialGradient") 
     .append(":stop") 
     .attr ("offset","0") 
     .style("stop-color", "rgb(255,255,255)") 
     .style("stop-opacity", "0") 
     .append(":stop") 
     .attr ("offset","100%") 
     .style("stop-color", "rgb(0,0,255)") 
     .style("stop-opacity", "1") 
    ; 

welche Ausgänge die folgenden ..

 <svg> 
     <defs cx="50%" cy="50%" fx="50%" fy="50%" id="MyGradient"> 
     <radialGradient> 
     <stop offset="0" style="stop-color: rgb(255, 255, 255); stop-opacity: 0;"> 
     <stop offset="100%" style="stop-color: rgb(0, 0, 255); stop-opacity: 1;"/> 
     </stop> 
     </radialGradient> 
     </defs> 
     </svg> 

die in der Nähe ist, aber der zweite ‚Stop‘ ist ein Kind des ersten ‚Stop‘. Wie könnte ich den Code so anpassen, dass die 'Stop's Geschwister sind bitte?

Answer 1

Ich denke, .append() könnte die vorherige Append in einer Weise verketten, die es als Kind dieses Elements erstellt. Funktioniert es, wenn Sie das zweite .append() zu einem .after() ändern?

this.body.append("svg:defs") 
     .attr("cx","50%") 
     .attr("cy","50%") 
     .attr("fx","50%") 
     .attr ("fy","50%") 
     .attr ("id","MyGradient") 
     .append("radialGradient") 
     .append(":stop") 
     .attr ("offset","0") 
     .style("stop-color", "rgb(255,255,255)") 
     .style("stop-opacity", "0") 
     .after(":stop") 
     .attr ("offset","100%") 
     .style("stop-color", "rgb(0,0,255)") 
     .style("stop-opacity", "1") 
    ;