如何通过在 svg 中保持固定位置来缩放元素

Posted 2023-05-08

【中文标题】如何通过在 svg 中保持固定位置来缩放元素

【英文标题】：how to scale the element by keeping the fixed position in svg

【发布时间】：2013-06-01 12:12:38

【问题描述】：

我想在固定位置缩放下面的元素。

<path id="container_svg_rectsymbol1" fill="red" stroke- stroke="Gray" d="M 73.1111111111111 -71.75 L 83.1111111111111 -71.75 L 83.1111111111111 -61.75 L 73.1111111111111 -61.75 L 73.1111111111111 -71.75" transform="scale(1)"/>

当我开始缩放时，它会从一个位置移动到另一个位置。我不想移动对象我只想放大对象的大小。

我参考了以下链接。

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

如何进行固定缩放？

我想为元素设置动画，即在固定位置放大尺寸。我已经按照以下方式实施。但它仍然会从原点移动元素。请参考以下代码。

 var box = element.getBBox();
 var scaleVal=null, x=null, y=null;
 $(element).animate(
     
          scale: 1,
          centerX:box.x+(4*transX),
          centerY:box.y+(4*transY)
     ,
     
          duration: 4000,
          step: function(now,fx) 
              if (fx.prop == "scale") 
                   scaleVal = now;
               else if (fx.prop == "centerX") 
                   x = now;
               else if (fx.prop == "centerY") 
                   y = now;
              

              if(!sf.util.isNullOrUndefined(scaleVal) && !sf.util.isNullOrUndefined(x) && !sf.util.isNullOrUndefined(y)) 
                  $(element).attr("transform", "translate("+(-x*(scaleVal-1))+","+(-y*(scaleVal-1))+")scale(" + scaleVal + ")");
              
          
      )

参考以下链接以在中心点进行缩放。

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System

但它仍然从原点开始并放大元素。

谢谢，

湿婆

【问题讨论】：

试试phrogz优秀答案

@Alvin：这与我的要求无关。

【参考方案1】：

缩放以原点 (0, 0) 为中心，因此如果您的形状未以 (0, 0) 为中心，它会出现移动。要解决此问题，请先平移您的形状，使其以原点为中心，然后对其进行缩放，然后将其平移回来：

transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"

请注意，转换是以相反的顺序完成的。

您可以通过创建一个以原点为中心的形状来简化事情，然后对其进行缩放和变换。

<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>

你也可以将变换转换成矩阵，这样效率会更高：

<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>

[编辑] 要使用 jQuery 动画，这应该可以工作（在 4 秒内从 0 缩放到 1）：

        var box = element.getBBox();
        var cx = box.x + box.width/2;
        var cy = box.y + box.height/2;

        $(element).animate(
             scale: 1 ,
             duration: 4000,
              step: function(now, fx) 
                    scaleVal = now;
                    $(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")");
                 
            
        );

【讨论】：

我可以知道你在那篇文章中提到的值 -78.11 和 66.75 是什么，并在下一行更改为 78.11,-66.75

我已经编辑了这个问题。请您参考一下。正在从元素的中心位置使用缩放值做动画

这些值是您绘制的形状的中心。您可以使用 getBBox。在这种情况下，值为 box.x + box.width/2 和 box.y + box.height/2。首先转换这些值的负值，然后缩放，然后再转换回正值。

【参考方案2】：

好的，既然我已经重读了您的问题，您似乎想使用transform="scale()"并遇到神秘的“移动”，这对于大多数学习SVG的初学者（包括我）来说都是困惑的。

缩放是从origin(0,0) 测量的，因此如果对象位于(50,-100) 位置，则在应用scale(2) 时，对象位置将加倍为(50*2, -100*2) => (100, -200)。因此，您需要通过 translate(-50,100) 更正此问题。

使用matrix() 将是下一个要探索的领域，因为它非常直观。上面的示例需要matrix(2 0 0 2 -50 100) 缩放并将其移回原始位置。同样使用matrix() 代码，您可以使用第二和第三字段轻松执行flip() 和mirror()。同样，您必须为这两个转换转换对象的长度和/或宽度。

【讨论】：

我尝试了下面的一些东西 translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor)

参考以下链接commons.oreilly.com/wiki/index.php/SVG_Essentials/…

但它仍然无法正常工作。我也在使用翻译

:请问你是指链接吗？