在Javascript中创建相对于路径的SVG圆

如何在SVG画布中，从通用Javascript或jQuery在填充路径的中心点创建一个圆

我试过：

var path = $('#path123')[0];
var bb = path.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
$('svg').append('<circle cx="'+cx+'" cy="'+cy+'" r="40" stroke="black" stroke-width="3" fill="red" />');

var path=$（'#path123'）[0]；
var bb=path.getBBox（）；
var cx=bb.x+bb.width/2；
var cy=bb.y+bb.height/2；
$（'svg'）。追加（“”）；

---

但这似乎没有任何作用，因为我看不到创建的任何圆圈。

您无法直接使用代码操纵svg。您需要创建一个新节点并将其插入：

var pth=$（'#path123'）[0]；
var bb=pth.getBBox（）；
var cx=bb.x+bb.width/2；
var cy=bb.y+bb.height/2；
设c=document.createElements（'http://www.w3.org/2000/svg","圈",；
c、 setAttribute（'cx'，cx）；
c、 setAttribute（'cy'，cy）；
c、 setAttribute（'r'，40）；
c、 setAttribute（'fill'，'red'）；
c、 setAttribute（'stroke'，'black'）；
c、 setAttribute（'stroke-width'，3）；
$（'svg'）[0].insertBefore（c，pth）
Jquery将元素添加到DOM上，但不添加到屏幕上：

$(document).ready(function() {
  var path = $('#path123')[0];
  var bb = path.getBBox();
  var cx = bb.x + bb.width / 2;
  var cy = bb.y + bb.height / 2;
  
  var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  obj.setAttributeNS(null, "cx", cx);
  obj.setAttributeNS(null, "cy", cy);
  obj.setAttributeNS(null, "r", 40);
  obj.setAttributeNS(null, "stroke", "black");
  obj.setAttributeNS(null, "stroke-width", 3);
  obj.setAttributeNS(null, "fill", "red");
  $("svg")[0].append(obj,pth);
});

另一种技术是将svg包含在div中，并在添加svg后刷新：

  <div id="divsvg"
    <svg width="300" height="300">
      <path id="path123" d="........." />
    </svg>
  </div>


$("svg").append('<circle ....... fill="red"/>');
$("#divsvg").html($("#divsvg").html());

你能用path123显示你的html吗？马上就到了。但是，插入的圆实际上位于路径下方，因此仍然无法看到。我不知道您想要的行为。您只需使用
appendChild（c）
更改脚本末尾的
insertBefore（c，pth）
。我只是想让路径可见。