我在petercollingridge.co.uk上找到了一些有趣的代码来拖动SVG。

尝试使它在我的项目中工作一段时间后,我决定只是尝试让Peter的代码在fiddle.中运行



<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
    <style>
    .draggable {
        cursor: move;
    }
    </style>
    <script type="text/ecmascript">
    < ![CDATA[
        var selectedElement = 0;
        var currentX = 0;
        var currentY = 0;
        var currentMatrix = 0;

        function selectElement(evt) {
            selectedElement = evt.target;
            currentX = evt.clientX;
            currentY = evt.clientY;
            currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');

            for (var i = 0; i < currentMatrix.length; i++) {
                currentMatrix[i] = parseFloat(currentMatrix[i]);
            }

            selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
            selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
            selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
        }

        function moveElement(evt) {
            var dx = evt.clientX - currentX;
            var dy = evt.clientY - currentY;
            currentMatrix[4] += dx;
            currentMatrix[5] += dy;
            selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
            currentX = evt.clientX;
            currentY = evt.clientY;
        }

        function deselectElement(evt) {
            if (selectedElement != 0) {
                selectedElement.removeAttributeNS(null, "onmousemove");
                selectedElement.removeAttributeNS(null, "onmouseout");
                selectedElement.removeAttributeNS(null, "onmouseup");
                selectedElement = 0;
            }
        }
    ]] >
    </script>
    <rect x="0.5" y="0.5" width="399" height="199" fill="none" stroke="black" />
    <rect class="draggable" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 25 20)" onmousedown="selectElement(evt)" />
    <rect class="draggable" x="160" y="50" width="50" height="50" fill="green" transform="matrix(1 0 0 1 103 -25)" onmousedown="selectElement(evt)" />
</svg>





我仍然遇到我在项目中遇到的错误,这些错误是:


  “未捕获的SyntaxError:意外的标记

我读到一些有关不可见字符的信息,如果您复制/粘贴代码,则会导致第一个问题,但我没有发现任何问题。

谢谢你的尽心帮助。

最佳答案

就像其他人说的那样,只需删除CDATA巨型文件即可。这是更新的小提琴:
https://jsfiddle.net/88pocqsr/1/

我们已经删除了< ![CDATA[]]>

关于javascript - 我正在尝试获取此代码,以使可拖动的SVG正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35234415/

10-11 23:30
查看更多