как масштабировать элемент, сохраняя фиксированное положение в 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

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

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

 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

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

Спасибо,

Шива


svg scale coordinate-transformation jquery-animate jquery-svg
person SivaRajini    schedule 05.06.2013    source источник
comment
Попробуйте phrogz отличный ответ   -  person Alvin K.    schedule 05.06.2013
comment
@ Элвин: это не относится к моему требованию.   -  person SivaRajini    schedule 06.06.2013

Ответы (2)


arrow_upward
18
arrow_downward

Масштабирование сосредоточено в начале координат (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, это должно работать (масштабирование от 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) + ")");
                } 
            }
        );
person Peter Collingridge    schedule 06.06.2013
comment
могу ли я узнать, что такое значение -78,11 и 66,75 u, упомянутое в этом посте и измененное в следующей строке, например 78,11, -66,75 - person SivaRajini; 06.06.2013
comment
я отредактировал вопрос. не могли бы вы сослаться на него. я делаю анимацию со значением масштаба от центрального положения элемента - person SivaRajini; 06.06.2013
comment
Эти значения являются центром фигуры, которую вы нарисовали. Вы можете использовать getBBox. В этом случае значения равны box.x + box.width/2 и box.y + box.height/2. Сначала переведите отрицательное значение этих значений, затем масштабируйте, а затем переведите обратно положительное значение. - person Peter Collingridge; 07.06.2013

arrow_upward
4
arrow_downward

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

person Alvin K.    schedule 06.06.2013
comment
я пытался как-то ниже перевести (-centerX * (фактор-1), -centerY * (фактор-1)) масштаб (фактор) - person SivaRajini; 06.06.2013
comment
по ссылке ниже commons.oreilly.com/wiki/index.php/SVG_Essentials/ - person SivaRajini; 06.06.2013
comment
но он не работает, все еще движется. я тоже пользуюсь переводчиком - person SivaRajini; 06.06.2013
comment
:colud дайте пожалуйста ссылку ? - person SivaRajini; 06.06.2013