Javascript SVG组通过其上的可拖动文本区域移动

我的情况是什么：

我有一个svg（1024x576），它显示在网站上，宽818px，高458px

组上方#levapostava绝对位于文本区域，可拖动（svg上方）

当拖动textarea时，通过更改矩阵来拖动#levapostava

我的问题是什么：

当我将文本区域（Abulute position）向左拖动10px时，我需要知道应该向左移动多少像素，因为视图框为1024x576，svg显示为818x458px。由于翻译，它不是10px

我花了4个小时想弄明白这一点，但没有成功

谢谢你的建议

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="576px" viewBox="0 0 1024 576" enable-background="new 0 0 1024 576" xml:space="preserve">
        <g>
            <g id="levapostava" transform="matrix(1 0 0 1 0 0)">
               ...
            </g>
        </g>
    </svg>

    <textarea which is absolutely positioned over #levapostava />

...

在SVG元素上调用函数

getScreenCTM（）

，将得到用于将SVG点转换为屏幕坐标的矩阵。但是您需要相反的方法，因此需要通过调用

inverse（）

来反转该矩阵

现在，如果在矩阵中运行一个屏幕点，将在SVG中获得等效点。您可以使用它来转换“levapostava”组

您的代码将类似于：

// Get the SVG dom element
var  svg = document.getElementById("mysvg");

// Get an SVGPoint object that we can transform
var screenPoint = svg.createSVGPoint();
screenPoint.x = textareaLeft;
screenPoint.y = textareaTop;

// Get the Current Transform Matrix of the SVG, and invert it
var inverseCTM = svg.getScreenCTM().inverse();

// Apply the inverted transform to the (textarea) screen coordinates
var svgPoint = screenPoint.matrixTransform(inverseCTM);
// 'svgPoint' is now the point in the SVG space that corresponds to
// screenPoint in screen space

// Apply a transform the SVG object to match the textarea
var levapostava = svg.getElementById("levapostava");
levapostava.setAttribute("transform", "translate(" + svgPoint.x + "," + svgPoint.y + ")");