gpt4 book ai didi

javascript - svg 中心点出现问题

转载 作者:行者123 更新时间:2023-11-28 15:38:03 27 4
gpt4 key购买 nike

这是查找 svg 图像中心点并显示点的代码,但出现 el 为 null 的错误。任何人都可以告诉我错误是什么。我可以在此处添加 js 库吗?

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var svg = document.querySelector("svg");
var svgns = "http://www.w3.org/2000/svg";

// get the center
var el = document.querySelector("path");
var bbox = el.getBBox();
var center = {
x: bbox.left + bbox.width/2,
y: bbox.top + bbox.height/2
};

// create the dot
var dot = document.createElementNS(svgns, circle);
console.log(dot);
dot.setAttribute("cx", center.x);
dot.setAttribute("cy", center.y);
dot.setAttribute("r", 10);
svg.appendChild(dot);
</script>
</head>
<body>

<svg height="210" width="400" >
<path d="M75 0 L56 105 L225 200 Z" />
</svg>

</body>
</html>

最佳答案

尝试使用 element.getBoundingClientRect(); 而不是 element.getBBox() ,它似乎工作正常:

          var svg   = document.querySelector("svg");
var svgns = "http://www.w3.org/2000/svg";

// get the center
var el = document.querySelector("path");
var bbox = el.getBoundingClientRect();
var center = {
x: bbox.left + bbox.width/2,
y: bbox.top + bbox.height/2
};

// create the dot
var dot = document.createElementNS(svgns, "circle");
console.log(dot);
dot.setAttribute("cx", center.x);
dot.setAttribute("cy", center.y);
dot.setAttribute("r", 10);
svg.appendChild(dot);

fiddle :http://jsfiddle.net/dd5kY/

关于javascript - svg 中心点出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24968825/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com