Question

我的情况是什么：

我有一个svg（1024x576），显示在网站上，宽度为818像素，高度为458像素
超群#levapostava绝对定位于textarea且可拖动（超过svg）
当拖动textarea时，通过更改矩阵

我的问题是什么：

当我向左拖动我的textarea（absulute位置）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中的等效点。你可以用它来改变＆＃34; levapostava＆＃34;基。

您的代码将类似于：

// 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小组由可拖动的textarea移动

1 个答案: