如何通过将固定位置保持在svg中来缩放元素 [英] how to scale the element by keeping the fixed position in svg

问题描述

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

i want to scale the below element in fixed position.

<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)"/>

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

when am start scaling it moves from one location to another location. i don't want to move the object i just want to enlarge the size of object.

我已经引用了以下链接.

i have referred following link.

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

如何进行固定缩放?

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

i want to animate the element i.e enlarge the size in fixed position. i have implemented in following way. but it sill moves the element from origin. please refer below code.

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

请参考以下链接以缩放中心点.

referred the below link for scaling in centered point.

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

但是它仍然从原点开始，并放大了元素.

but it still starts from origin and enlarges the element.

谢谢

Siva

推荐答案

缩放比例在原点(0，0)上居中，因此，如果形状不在(0，0)上居中，则它似乎会移动.要解决此问题，请先平移您的形状，使其以原点为中心，然后对其进行缩放，然后再将其平移回去:

Scaling is centred on the origin (0, 0), so if your shape is not centred on (0, 0) it will appear to move. To fix this first translate your shape so it is centred on the origin, then scale it, then translate it back:

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

请注意，转换是按照相反的顺序进行的.

Note that the transformations are done in reverse order.

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

You could simplify things by creating a shape centred on the origin to start with and then scaling and transforming it.

<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)"/>

您还可以将转换转换为矩阵，这样会更有效:

You could also convert the transform into matrix, which would be more efficient:

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

To use jQuery animate, this should work (scaling from 0 to 1 over 4 seconds):

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

这篇关于如何通过将固定位置保持在svg中来缩放元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！