Html 从中心缩放路径

我有以下SVG图形：

<svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px">
    <path d="M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z" id="control"/>
</svg>

---

如果知道中心点的坐标，则可以在一个变换中组合平移和缩放。换算计算为：

（1-刻度）*currentPosition

如果中心是

（10,20）

，您按

3

缩放，则按

（1-3）*10，（1-3）*20

=

（-20，-40）

：

转换的应用顺序与声明的相反，因此在上面的示例中，首先执行

缩放

，然后执行

平移

。缩放会影响坐标，因此此处的平移是在缩放坐标中进行的

---

您可以使用

元素.getBBox（）

以编程方式计算中心点。如果您知道中心点的坐标，则可以在一次变换中组合平移和缩放。换算计算为：

（1-刻度）*currentPosition

如果中心是

（10,20）

，您按

3

缩放，则按

（1-3）*10，（1-3）*20

=

（-20，-40）

：

转换的应用顺序与声明的相反，因此在上面的示例中，首先执行

缩放

，然后执行

平移

。缩放会影响坐标，因此此处的平移是在缩放坐标中进行的

您可以使用

element.getBBox（）

以编程方式计算中心点前面提供的答案非常好。还有另一件事需要注意——笔划宽度，以便在对象缩放时轮廓保持相同的宽度。用法：

stroke-width: (1/scaling-factor)

因此，如果您的缩放比例为2，则：

stroke-width: (0.5)

注意：您不应该遗漏aetheria提到的

转换：翻译（…）比例（2）

。

前面提供的答案非常好。还有另一件事需要注意——笔划宽度，以便在对象缩放时轮廓保持相同的宽度。用法：

stroke-width: (1/scaling-factor)

因此，如果您的缩放比例为2，则：

stroke-width: (0.5)

---

注意：您不应遗漏aetheria提到的变换：平移（…）比例（2）。

您可以将原点更改为中心：

.scaled-path-svg {
  svg {
    path {
      transform-origin: center;
      transform: scale(1.1);
    }
  }
}

---

可以将原点更改为中心：

.scaled-path-svg {
  svg {
    path {
      transform-origin: center;
      transform: scale(1.1);
    }
  }
}

---

谢谢你的回答，我会尽我所能回答正确的。出于兴趣，element.getBBox（）只返回一个SVG矩形，其值为高度：43.5，宽度：54，x:0，y:0。。。我会使用宽度和高度值/2吗？是的，您的中心点正好是

（宽度/2+x，高度/2+y）

。请注意，如果路径不在

0,0

，您需要将

bbox.x

和

bbox.y

值添加到计算中，例如

（1-刻度）*（bbox.x+bbox.width/2）

我相信你可以通过做额外的翻译来避免中心的数学问题。例如，如果中心是

（cx，cy）

您可以执行

transform=“translate（cx，cy）scale（3）translate（-cx，-cy）”

@urraka谢谢。这本身就是一个答案。真的帮了我的忙。谢谢你，我会尽我所能回答正确的。出于兴趣，element.getBBox（）只返回一个SVG矩形，其值为高度：43.5，宽度：54，x:0，y:0。。。我会使用宽度和高度值/2吗？是的，您的中心点正好是

（宽度/2+x，高度/2+y）

。请注意，如果路径不在

0,0

，您需要将

bbox.x

和

bbox.y

值添加到计算中，例如

（1-刻度）*（bbox.x+bbox.width/2）

我相信你可以通过做额外的翻译来避免中心的数学问题。例如，如果中心是

（cx，cy）

您可以执行

transform=“translate（cx，cy）scale（3）translate（-cx，-cy）”

@urraka谢谢。这本身就是一个答案。真的帮了我的忙，谢谢！这样的救命符请注意，这将围绕整个SVG的中心缩放形状，而不是形状的中心。如果不像公认的答案那样进行繁琐的计算，就无法从形状的中心向上/向下缩放形状。谢谢！这样的救命符请注意，这将围绕整个SVG的中心缩放形状，而不是形状的中心。如果不像公认的答案中那样进行繁琐的计算，就无法从形状本身的中心向上/向下缩放形状。