как масштабировать элемент, сохраняя фиксированное положение в svg

Я хочу масштабировать элемент ниже в фиксированном положении.

<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

Как сделать фиксированное масштабирование ?

Я хочу оживить элемент i e увеличьте размер в фиксированном положении. я реализовал следующим образом. но это подоконник перемещает элемент из источника. пожалуйста, см. ниже код.

 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

но он все равно начинается с origin и увеличивает элемент.

спасибо,

Шива

7
coordinate-transformation jquery-animate jquery-svg scale svg

2 ответов

масштабирование сосредоточено на начале координат (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)"/>

[EDIT] чтобы использовать jQuery animate, это должно работать (масштабирование от 0 до 1 в течение 4 секунд):

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

хорошо, теперь, когда я перечитал ваш вопрос, кажется, что вы хотите использовать 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() легко со 2-м и 3-м полем. Снова вам нужно перевести длину и / или ширину объекта для этих двух преобразований.

3