Question

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

<path id="container_svg_rectsymbol1" fill="red" stroke-width="1" 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

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

谢谢，

希瓦

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

Answer 2

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

缩放是从origin(0,0)开始衡量的，因此如果对象位于(50,-100)位置，则在应用scale(2)时，对象位置会加倍到(50*2, -100*2) =＆gt; (100, -200)。因此，您需要通过translate(-50,100)更正此问题。

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

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

2 个答案: