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（）更改为.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")
    ;

jquery追加到svg

1 个答案: