Question

我编写了一个可以调整SVG路径或任何形状的函数。然而，当我使用它时，路径确实被调整大小但不幸的是它也改变了我的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位置难以实现，我不会想到一个固定点。

Answer 1

我正在回答我自己的问题。

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

为了抵消这种影响，我们只需要对具有相同“变换”参数的元素应用负面翻译，尽管是负面的（它会将其移动到与变换相反的方向。

这样我们可以抵消转变的定位效应，我们只得到调整大小的效果。

将转换后的SVG元素定位在svg-canvas中

1 个答案: