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

Question

我的情况是什么：

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

我的问题是什么：

当我将文本区域（绝对位置）向左拖动 10px 时，我需要知道应该向左移动多少像素#levapostava，因为视图框为 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 />

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

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

SVG group moved by draggable textarea over it

javascript

svg

drag