大佬教程收集整理的这篇文章主要介绍了相对于 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());
以上是大佬教程为你收集整理的相对于 Javascript 中的路径创建 SVG 圆全部内容，希望文章能够帮你解决相对于 Javascript 中的路径创建 SVG 圆所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。