javascript - 将 svg 形状彼此居中

Question

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

为此，我遇到了一些解决方案，但仅适用于具有 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 属性。但是如果我有一个三 Angular 形，例如，它没有任何 x 或 y 属性，因为它是一条路径。我认为如果它是设置三 Angular 形或任何其他形状的边界框 x 和 y 属性的解决方案，它会像我在这个 demo 中所做的那样工作。

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

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

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

谢谢。

Answer 1

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

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