更改 SVG 边界框位置答案

【问题标题】：Change SVG bounding box position更改 SVG 边界框位置
【发布时间】：2014-09-03 06:19:58
【问题描述】：

我有一个 svg 圆和一个 svg 矩形，我想将矩形放在圆内，使矩形位置位于圆心。我知道获取边界框大小和位置的“getBBox()”方法，但我无法设置大小和位置。我的问题是矩形的中心似乎是它的左上角。这是示例代码：

<svg width="500" height="500">
<circle id="aaa" r="100" fill="red" transform="translate(150,150)"></circle>
<rect id="circle2" width="50" height="50" fill="green" transform="translate(150,150)">   </rect>
</svg>

【问题讨论】：

您可以在矩形的 x、y、width 和 height 属性上使用 setAttribute。您没有显示任何 javascript，有什么问题？
问题是我有很多形状，包括星形、路径等，我想将一个形状对齐到另一个形状，但我不知道每个形状中心的 x,y
这不是你在问题中所说的吗？
您不会说您是在使用现有的 SVG，还是在运行时创建形状。为前者找到解决方案非常棘手。为后者找到解决方案很容易。是哪个？

标签： svg shapes

【解决方案1】：

如果没有明确设置，圆圈的cx 和cy 将是null，实际上它们都是0。从圆的中心点，您可以使用以下公式推导出矩形的top-left 点（位置）：

x = cx - width / 2;
y = cy - height / 2;

所以你可以试试下面的脚本来设置圆心的矩形：

var rect = document.getElementById('circle2');
var circ = document.getElementById("aaa");
var cx = circ.getAttribute("cx");
var cy = circ.getAttribute("cy");
if(cx == null) cx = 0;
if(cy == null) cy = 0;
var w = parseInt(rect.getAttribute("width"));
var h = parseInt(rect.getAttribute("height"));
rect.setAttribute("x", cx - w/2);
rect.setAttribute("y", cy - h/2);

Demo.

【讨论】：

【解决方案2】：

在您的示例 SVG 中，您正在创建以原点为中心的圆，然后将其移动到 150,150。看起来您正在尝试对正方形执行相同的操作，只是您没有将其正确地居中于原点。

如果您正确放置正方形，它将起作用。正方形需要从 -25,-25 延伸到 25,25。见下文：

<svg width="500" height="500">
  <circle r="100" fill="red" transform="translate(150,150)"></circle>
  <rect x="-25" y="-25" width="50" height="50" fill="green" transform="translate(150,150)">   </rect>
</svg>

Fiddle here

【讨论】：

【解决方案3】：

我的建议：通常更容易围绕原点创建，<g>roup 和 translate。旋转也被简化了，因为它只是围绕原点旋转。

围绕原点创建圆（即：cx=0 和 cy=0）
围绕原点(x,y), (-x,y), (-x,-y), (x,-y) 创建<rect>
在<circle>和<rect>和translate这个组周围添加<g>标签。

【讨论】：