jquery在svg中追加

Question

我有一个生成的 svg，我正在尝试根据https://www.w3schools.com/graphics/svg_grad_linear.asp 使用渐变来定位和设置样式。因此，我尝试使用 .append 添加带有属性的标签“def”、“linearGradient”和“stop”标签。这是我目前拥有的

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

输出以下内容..

      <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() 可能会以一种将其创建为该元素的子元素的方式链接上一个 append。如果将第二个 .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")
    ;