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

如何解决相对于 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" />');

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

解决方法

您不能直接使用代码操作 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());