我正在尝试让我找到的可拖动 SVG 工作的代码答案

【问题标题】：I'm trying to get this code I found for draggable SVGs to work我正在尝试让我找到的可拖动 SVG 工作的代码
【发布时间】：2016-02-05 22:09:50
【问题描述】：

我在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>

我仍然收到我在项目中的错误，这些错误是：

“Uncaught SyntaxError: Unexpected token

如果您复制/粘贴代码，我阅读了一些关于导致第一个问题的不可见字符的内容，但我没有找到任何内容。

感谢您提供的任何帮助。

【问题讨论】：

去掉< ![CDATA[和]] >。这些不再需要。

标签： javascript svg draggable

【解决方案1】：

就像其他人所说，只需删除 CDATA 巨型。这是一个更新的小提琴： https://jsfiddle.net/88pocqsr/1/

我们已删除 < ![CDATA[ 和 ]]>

【讨论】：

【解决方案2】：

换行

< ![CDATA[

到

<![CDATA[

（删除

和线

]] >

到

]]>

【讨论】：

谢谢 RH。无法正确显示标签。