将转换后的SVG元素放置在svg画布内 [英] Positioning a transformed SVG element within an svg-canvas

问题描述

我编写了一个函数，该函数将调整SVG路径或任何形状的大小.但是，当我使用它时，路径的确会调整大小，但不幸的是，它还会更改我的svg画布中的位置.

I have written a function that will resize an SVG path, or any shape. However when i use it the path does gets resized but unfortunatetly it also changes position within my svg-canvas.

这是我的职责

    function output() 
    {
       var transformw=prompt("Enter your new width");
       var transformh=prompt("Enter your new height");
       var lastw = svg_1.getBoundingClientRect().width;
       var lasth = svg_1.getBoundingClientRect().height;

       newW=transformw/lastw;
       newH=transformh/lasth;
       alert(newH);
       alert(newW);

       svgCanvas.changeSelectedAttribute("transform", 
            "matrix(" + newW + ", 0, 0, " + newH + ", 0, 0)");

       svgCanvas.recalculateAllSelectedDimensions();
    }

我只希望形状一旦变形就可以放置在画布的上角.理想情况下，我希望它们具有与变换之前相同的x，y位置，但是如果原始的x，y位置难以实现，我不介意拥有固定点.

I only want the shapes to be positioned on the top corner of my canvas once they get transformed. Ideally i would want them to have the same x,y position they had before the transformation however i wouldnt mind to have a fixed point if the original x,y position is difficult to achieve.

推荐答案

我正在回答自己的问题.

i am answering my own question.

当我们使用transform调整SVG元素的大小时，元素相对于我们所做的变换在x，y轴上移动.

When we resize an SVG element using transform the elements gets moved in the x,y axis relative to the transformation we did.

要抵消这种影响，我们只需要对具有相同变换"参数的元素进行负平移，尽管它是负数(它将移至与变换相反的方向.

To counteract this effect we just need to apply a negative translation on the element that has the same ''transformation'' parameters albeit negatively(it moves it to the opposite direction than what the transformation does.

这样，我们抵消了转换的定位效果，而只获得了调整大小的效果.

This way we counteract the positioning effects of a tranformation and we only get the resizing effects.

这篇关于将转换后的SVG元素放置在svg画布内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！