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

你不能直接用代码操纵svg。您需要创建一个新节点并插入它:

var pth = $('#path123')[0];
var bb = pth.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
let c = document.createElementNS('http://www.w3.org/2000/svg','circle');
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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="300" height="300">
  <path id="path123" d="M 100 100 l 50 50 l -50 0 Z" />
</svg>

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