html5 – 从中​​心的缩放路径

我有以下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,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,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,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+") ");

解决方法

如果您知道中心点的坐标,则可以在一次转换中组合翻译和缩放.翻译计算如下：(1 – scale)* currentPosition.

如果中心是(10,20),并且你缩放3,则转换(1 – 3)* 10,(1 – 3)* 20 =(-20,-40)：

<g transform="translate(-20,-40) scale(3)">
    <path d="M45,7.5z" id="control"/>
</g>

转换按照与它们声明的顺序相反的顺序应用,因此在上面的例子中,首先执行缩放,然后再进行翻译.缩放影响坐标,因此这里的翻译是缩放坐标.

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

原文地址：https://www.jb51.cc/html5/168079.html