Question

我刚遇到一种情况，我希望将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属性时可能会犯一些错误。

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

感谢。

Answer 1

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

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

将svg定形在彼此内部

1 个答案: