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

【问题标题】：Positioning a transformed SVG element within an svg-canvas在 svg-canvas 中定位转换后的 SVG 元素
【发布时间】：2013-02-02 08:04:26
【问题描述】：

我编写了一个函数，可以调整 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 位置难以实现，我不介意有一个固定点。

【问题讨论】：

标签： javascript jquery svg jquery-svg svg-edit

【解决方案1】：

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

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

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

这样我们抵消了变换的定位效果，我们只得到调整大小的效果。

【讨论】：