从中心缩放路径答案

【问题标题】：Scale path from center从中心缩放路径
【发布时间】：2012-07-26 14:07:53
【问题描述】：

我有以下 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>

我想以编程方式更改此对象的比例，但我希望它从中心点开始缩放。

我试过用<g> 标签包裹它，就像这样

<g transform="translate(0,0)">
<path x="0" y="0" id="control" transform="scale(2)">...</path>
</g>

但这似乎不起作用。我一直在网上寻找，似乎缩放路径需要操纵路径矩阵，这似乎非常困难。烦人的是，它很容易使用additive="sum" 属性进行缩放，但在这种情况下，我没有使用变换动画。

谁能帮帮我？

编辑： 设法让它很好地工作，对于任何被困在同一件事上的人来说，这是一种以编程方式完成它的好方法：

var elem = document.getElementById("control");
var bBox = elem.getBBox();
var scaleX = 2;
var scaleY = 2;
$(elem).attr("transform", "scale("+scaleX+", "+scaleY+") translate("+-bBox.width/2+","+-bBox.height/2+") ");

【问题讨论】：

标签： html svg

【解决方案1】：

如果您知道中心点的坐标，那么您可以将平移和缩放组合在一个变换中。翻译计算为：(1 - scale) * currentPosition。

如果中心是(10, 20)，并且您按3 进行缩放，则按(1 - 3)*10, (1 - 3)*20 进行转换 = (-20, -40)：

<g transform="translate(-20, -40) scale(3)">
    <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"/>
</g>

转换的应用顺序与声明它们的顺序相反，因此在上面的示例中，首先执行scale，然后执行translate。缩放会影响坐标，所以这里的平移是缩放坐标。

您可以使用element.getBBox() 以编程方式计算中心点。

【讨论】：

谢谢你，我会尽可能正确地回答。出于兴趣，element.getBBox() 只返回一个 SVG 矩形，其值为 height: 43.5, width: 54, x: 0, y: 0... 我会使用宽度和高度值 / 2 吗？
是的，您的中心点正是(width / 2 + x, height / 2 + y)。
请注意，如果路径不在0, 0，则需要将bbox.x 和bbox.y 值添加到计算中，例如(1-scale) * (bbox.x + bbox.width/2)
我相信你可以通过额外的翻译来避免中心的数学问题。例如，如果中心是(cx, cy)，你可以做transform="translate(cx, cy) scale(3) translate(-cx, -cy)"
@urraka 谢谢。这应该是一个答案本身。真的帮助了我。

【解决方案2】：

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

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

【讨论】：

谢谢！这样的救星
请注意，这会围绕整个 SVG 的中心而不是 SHAPE 的中心缩放形状。没有像接受的答案那样进行繁琐的计算，就没有简单的方法可以从自己的中心向上/向下缩放形状。

【解决方案3】：

aetheria 早前提供的答案很棒。还有一件事需要注意——笔画宽度，以便在对象缩放时轮廓保持相同的宽度。用法：

stroke-width: (1/scaling-factor)

所以，如果你的缩放比例是 2，那么：

stroke-width: (0.5)

注意：您不应错过 aetheria 提到的 transform: translate(...) scale(2)。

【讨论】：