SVG 组由可拖动的 textarea 移动答案

【问题标题】：SVG group moved by draggable textarea over itSVG 组由可拖动的 textarea 移动
【发布时间】：2016-03-09 23:53:31
【问题描述】：

我的情况如何：

我有一个 svg (1024x576) 显示在网站上，宽度为 818 像素，高度为 458 像素
在组#levapostava 上是绝对定位的文本区域，并且是可拖动的（在 svg 上）
当 textarea 被拖动时，#levapostava 通过更改矩阵进行拖动

我的问题是什么：

当我将文本区域（绝对位置）向左拖动 10 像素时，我需要知道应该向左移动多少像素#levapostava，因为视图框为 1024x576，而 svg 显示为 818x458 像素。由于翻译不是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 />

【问题讨论】：

标签： javascript svg drag

【解决方案1】：

在 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 + ")");

【讨论】：