从中心缩放路径 [英] Scale path from center

问题描述

我有以下SVG图形：

 < svg version =1.1id =diagramxmlns = http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkx =0pxy =0pxwidth =375pxheight = 150像素 > 
 <路径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.5zid =control/> 
< / svg> 
  

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

我尝试将它包装在< g> 标记中，就像

 < g transform =translate（0,0）> 
< path x =0y =0id =controltransform =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 - 比例）* currentPosition 。

如果中心（10,20），然后按 3 进行缩放，然后按（1 - 3）* 10进行转换， （1 - 3）* 20 = （ - 20，-40）：

 < g transform =translate（-20，-40）scale（3）> 
 <路径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.5zid =control/> 
< / g> 
  

这些转换按照与声明相反的顺序应用，因此在上面的示例中，首先执行比例，然后执行 translate 。缩放会影响坐标，因此这里的翻译是按比例缩放的坐标。

您可以使用 element.getBBox（）。

I have the following SVG graphic:

<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>

I want to programmatically change the scale of this object, but I want it to scale from the a center point.

I've tried wrapping it around a <g> tag, like so

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

But this doesn't seem to work. I've been looking online and it seems that scaling a path requires manipulation of the paths matrix, which seems horrifically difficult. Annoyingly, its easy to scale using additive="sum" property but in this instance I am not using a transform animation.

Can anyone help me out?

Edit: Managed to get this working nicely, for anyone who is stuck on the same thing, here is a nice way of doing it programmatically:

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+") ");

解决方案

If you know the coordinates of the center point, then you can combine a translate and scale in one transformation. The translation is calculated as: (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>

The transformations are applied in reverse order from the one they are declared, so in the example, above, the scale is performed first and then the translate. Scaling affects the coordinates so the translation here is in scaled coordinates.

You can calculate the center point programmatically using element.getBBox().

这篇关于从中心缩放路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！