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

我编写了一个函数来调整SVG路径或任何形状的大小。 然而，当我使用它时，路径确实被resize但不幸的是它也改变了我的svg-canvas中的位置。

这是我的function

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(); } 

我只想让形状在转换后定位在canvas的顶角。 理想情况下，我希望它们在转换之前具有相同的x，y位置，但是如果原始的x，y位置难以实现，我不会想到一个固定点。

Answer 1

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

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

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

这样我们就可以抵消转变的定位效应，我们只能获得resize的效果。