我試圖讓我可以找到可拖動SVG的代碼

Question

我在petercollingridge.co.uk上找到了一些有趣的代碼來拖動SVG。

一段時間的努力得到它在我的項目工作後，我決定只是試圖讓彼得的代碼在一個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 <" and "Uncaught ReferenceError: selectElement is not defined "

我讀了一些關於看不見的字符導致第一個概率如果你複製/粘貼代碼，但我還沒有找到任何。

感謝您提供任何幫助。

Answer 1

更改線路

< ![CDATA[ 

到

<![CDATA[ 

（刪除<之間的空間！）

和線

]] > 

至

]]> 

Answer 2

像其他人一樣，只要刪除CDATA巨無霸。下面是一個更新的小提琴： https://jsfiddle.net/88pocqsr/1/

我們已經移除< ![CDATA[和]]>