将 svg 形状彼此居中答案

【问题标题】：Centering svg shapes inside one another将 svg 形状彼此居中
【发布时间】：2014-09-10 13:35:10
【问题描述】：

我刚刚遇到了一种情况，我想将 SVG 形状以不同的比例放置在彼此的中心。例如在圆的中心放置一个矩形或三角形或任何其他形状。

为此，我遇到了一些解决方案，但仅适用于某些具有 x 和 y 属性的形状，例如矩形。例如，我将一个矩形放置在一个圆的中心，如下所示：demo

var circle =document.getElementById('c1');
var rect = document.getElementById('r1');
var group = document.getElementById('g1');
var BBox = rect.getBBox();

rect.setAttribute('x',-(BBox.width/2));
rect.setAttribute('y',-(BBox.height/2));

rect.setAttribute('transform','scale(2)');
circle.setAttribute('transform','scale(1)');
group.setAttribute('transform','translate(200,150)');

但正如您所见，它设置了矩形 x 和 y 属性。但是，例如，如果我有一个三角形，它就没有任何 x 或 y 属性，因为它是一条路径。我认为，如果它是设置三角形或任何其他形状的边界框 x 和 y 属性的解决方案，它将像我在 demo 中所做的那样工作。

BBox.setAttribute('x',-(BBox.width/2));
BBox.setAttribute('y',-(BBox.height/2));

但它并没有按预期工作，因为我在设置 BBox 属性时可能犯了一些错误。

现在我的问题是，是否有任何解决方案可以设置边界框属性，或者是否有任何其他更好的解决方案可以将形状置于另一个形状的中心？

谢谢。

【问题讨论】：

嗯，我今天没时间测试，但你的代码看起来不错。除了我认为它是 BBox.setAttribute('y',-(BBox.height/2));而不是宽度，不是吗？
谢谢。你说得对，我刚改了
而且我认为 BBox 没有 setAttribute 方法。它必须被检查..
是的，我刚刚提到它不能正常工作，我想知道有没有办法设置 BBox 属性，或者这是否是一个正确的解决方案。
对不起，我没有花时间好好阅读。 :/ 我认为你需要使用对象的视口（在他的视口中设置对象并移动视口）。

标签： javascript html css svg

【解决方案1】：

边界框（由getBBox() 等返回）是只读属性。您不能通过更改 bbox 值来调整元素的位置。

如果要重新定位 <path> 元素，您必须：(a) 更改 d 属性中的坐标，或 (b) 使用 transform 属性。

【讨论】：

谢谢。没错，我可以将矩形放在圆心。但我不知道为什么它不适用于每种路径形状。我想知道是否有更好的方法将形状居中在另一个形状中？
我尝试过使用像 link 这样的三角形，但它不在圆的中心。我知道我做错了什么但不知道在哪里？
您的代码运行正常。如果您查看三角形的上方和下方，则到圆边缘的距离是相同的。这里的问题是三角形的质心与其宽度/高度的平均值不同。换句话说，三角形的一半不是它的几何中心。在三角形中，质心实际上是高度的 1/3。因此，与其将其向上移动 1/2，不如将其向上移动 2/3。 jsfiddle.net/zobj7otj/1
非常感谢您的解决方案非常好我的问题解决了。