Javascript D3 SVG将缩放移动到内部矩形<；g>；有不同角度的

我有

背景图像和svg上的不同矩形，它们位于正确的位置。
我的矩形按带有平移值的

分组，每个矩形都有特定的旋转值。现在，我希望我的SVG将焦点（显示在页面中心）放在特定的矩形上，而不干扰背景图像，并在那个里进行SVG翻译。。主要问题是这些矩形也有不同的角度。 所以翻译工作不正常

SVG如下所示。
有人能给我提供指导吗

<svg width="4500" height="3610" style="background: url(&quot;/images/001.jpg&quot;) no-repeat;">   
<g id="228" transform="translate(2001,620)rotate(216) translate(0 -216)">
 <g>
<rect x="0" y="0" height="72" width="36" stroke="black" style="fill: transparent;">
</rect><text x="0" y="36" text-anchor="start" style="fill: black;">228</text>
</g>
 <g>
  <rect x="36" y="0" height="72" width="36" stroke="black" style="fill: transparent;">
  </rect><text x="36" y="36" text-anchor="start" style="fill: black;">229</text>
   </g>
 </g>
 </svg>

228
229

这在SVG中应该更容易，而且可能更容易，但我的解决方案是：

首先，我们需要获得要在其坐标空间中缩放的矩形的边界框：

// Bounds in local coordinates space:
var bounds = rectElement.getBBox();

其次，我们从这个边界框中得到四个角：

 // Corners of rect in local coordinate space:
 var corners = [
     {x: bounds.x,y: bounds.y},
     {x: bounds.x + bounds.width, y: bounds.y},
     {x: bounds.x + bounds.width, y: bounds.y + bounds.height },
     {x: bounds.x, y: bounds.y + bounds.height }
 ];

第三，我们得到矩形和SVG之间的转换矩阵：

 // relevant transform:
 var t = rectElement.getCTM();

现在，我们可以将角点转换为全局SVG单位：

  // Convert the points to global SVG coordainte space:
  for(var i = 0; i < corners.length; i++) {
      var point = svg.node().createSVGPoint();
      point.x = corners[i].x;
      point.y = corners[i].y;
      corners[i] = point.matrixTransform(t);
   }

这为我们提供了旋转的宽度和高度，我们现在可以使用它来缩放SVG:。我在缩放函数中使用了一个小的边距（每边边距为10%）：

我是这样使用的：

var k = scale(w,h,SVGwidth,SVGheight);

此时，我可以缩放到平移为

-x[0]*k

，

-y[0]*k

且缩放比例为

k

的矩形。但是，这将导致SVG左上角的形状，我想说明边距以及相对于SVG宽度/高度较小的矩形宽度/高度。为此，我计算x，y的偏移量：

// Offset to center feature:
var ox = (SVGwidth - w*k)/2;
var oy = (SVGheight- h*k)/2;

现在我可以在SVG中创建将给定矩形居中的变换：

var newTransform = "translate("+[-x[0]*k+ox,-y[0]*k+oy]+")scale("+k+")";

这些代码段使用父级

g

保存SVG中的所有内容，这使得管理转换更加容易。此外，当缩放到矩形时，此

g

会擦除其变换，因为我们不需要从当前缩放状态/变换的相对变换，而是从原始缩放状态/变换的相对变换，否则我们将看到奇怪的行为

下面是一个缩放行为示例，允许您手动缩放/平移，但可以选择单击以缩放到矩形：

var svg=d3.选择（“svg”）；
var contents=svg.html（）；
svg.selectAll（“*”）.remove（）；
var g=svg.append（“g”）
.attr（“变换”、“平移（0,0）比例（1）”）
.html（目录）；
var SVGwidth=400；
var SVGheight=180；
//要获取比例因子，请执行以下操作：
var scale=函数（elementWidth、elementHeight、SVGWidth、SVGHeight）{
返回数学最小值（SVGWidth/elementWidth*0.8，SVGHeight/elementHeight*0.8）；
}
var zoom=d3.zoom（）
.打开（“缩放”，功能（d）{
g、 attr（“transform”，d3.event.transform）；
})
调用（缩放）；
函数zoomToRect（rect）{
//局部坐标空间中的边界：
var bounds=rect.getBBox（）；
//局部坐标空间中矩形的角点：
变量角=[
{x:bounds.x，y:bounds.y}，
{x:bounds.x+bounds.width，y:bounds.y}，
{x:bounds.x+bounds.width，y:bounds.y+bounds.height}，
{x:bounds.x，y:bounds.y+bounds.height}
];
//重置转换：
g、 attr（“变换”，“变换”）；
//相关转换：
var t=rect.getCTM（）；
//将点转换为全局SVG坐标系空间：
对于（变量i=0；i
svg{
边框：1px点黑色；
}
div{
位置：绝对位置；
排名：0；
左：0；
}

228
229
454
455
缩放到228
您应用了转换，但我们可以应用转换吗，因为在应用转换时，背景图像和矩形不在同一位置，它必须位于同一位置…svg的背景图像等需要同步工具非常感谢@andrew Reid。。你节省了我很多时间。。。
// Offset to center feature:
var ox = (SVGwidth - w*k)/2;
var oy = (SVGheight- h*k)/2;

var newTransform = "translate("+[-x[0]*k+ox,-y[0]*k+oy]+")scale("+k+")";