从中心缩放路径

Question

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

但这似乎不起作用。似乎缩放路径需要操纵 path 的矩阵，这似乎非常困难。恼人的是，使用 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})`);

原文由 Hanpan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

If the center is (10, 20) and you are scaling by 3 then translate by (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() 以编程方式计算中心点。

原文由 ᴇʟᴇvᴀтᴇ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Elad Amsalem 发布，翻译遵循 CC BY-SA 3.0 许可协议