jqueryはsvgで追加します

Question

私はターゲットとして、グラデーションを使ってスタイルを設定しようとしていますが、生成されたsvgはhttps://www.w3schools.com/graphics/svg_grad_linear.aspに従っています。したがって、私は、タグ 'def'、 'linearGradient'、および 'stop'タグを.appendを使って属性に追加しようとしています。これは..私は次のように出力され、現在

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") 
    ; 

持っているものに近いですが、2番目の「停止」は最初に「STOP」の子である

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

です。 「停止は兄弟であるようにコードを調整するにはどうしたらよいですか？

Answer 1

私は、.append（）がそれをその要素の子として作成している方法で連鎖している可能性があります。 2番目の.append（）を.after（）に変更すると動作しますか？

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") 
    ;