找出svg形状的中心 [英] Find center of svg shape

问题描述

我正在使用svgjs创建我的形状.如何找到svg形状的中心点并在其中添加元素?以我为例，有一个红点.在这种情况下，我无法在文档中找到任何方法或其他有用信息.

Im using svgjs to create my shapes. How can I find the center point of an svg shape and add an element there? In my case a red dot. I can't find any information in the documentation for a method or something that helps in this situation.

推荐答案

您可以使用方法 getBBox 或 getBoundingClientRect .这两种方法都为您提供了具有x, y, width, height属性的对象，您可以使用该属性计算中心.

You can use the method getBBox or alternatively getBoundingClientRect. Both methods give you an object with the properties x, y, width, height, which you can use to calculate your center.

由于您用svg.js标记了问题，因此我还将使用 svg.js .

Since you tagged your question with svg.js I will also give you a solution with svg.js.

// Vanilla
node = document.getElementById('myEl').getBBox()

// with svg.js
SVG.adopt(document.getElementById('myEl')).bbox()

第二种解决方案将为您提供一个已经为您计算出cx和cy的对象.

The second solution gives you back an object which has cx and cy already calculated for you.

可以在文档

这篇关于找出svg形状的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！