從瀏覽器中刪除SVG元素的交互方式

Question

我通過javascript/inline HTML5生成SVG矩形，我想知道如果我可以在一個矩形的右上角附上一個關閉圖標（如：https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRV4yho7mQoRWj-wEd8LvvKjs4sMAWSFi9cJu5IxGtWn667ofL10g），以便當我拖動矩形時，圖標不會保持靜止到該位置，並始終附着到該矩形。

我的目標是讓用戶有機會從頁面中刪除該矩形。

如果有更簡單的方法來做到這一點刪除的東西，請隨時讓我知道！

在此先感謝！

---

拖放功能：

var selectedElement = 0; 
     var currentX = 10; 
     var currentY = 10; 
     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(event)"); 
      selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(event)"); 

     }  

     function deselectElement(evt) { 

      if (selectedElement != 0) { 

       selectedElement.removeAttributeNS(null, "onmousemove"); 

       selectedElement.removeAttributeNS(null, "onmouseout"); 

       selectedElement.removeAttributeNS(null, "onmouseup"); 

       selectedElement = 0; 
      } 

     }  


     function moveElement(evt) { 

      dx = evt.clientX - currentX; 
      dy = evt.clientY - currentY; 

      currentMatrix[4] += dx; 
      currentMatrix[5] += dy; 
      newMatrix = "matrix(" + currentMatrix.join(' ') + ")"; 

      selectedElement.setAttributeNS(null, "transform", newMatrix); 

      currentX = evt.clientX; 

      currentY = evt.clientY; 

     } 

創建元素：

var g1 = document.createElementNS(svgNS, 'g'); 

       g1.setAttribute('transform', "translate(200,200)"); 

       rect = document.createElementNS(svgNS, 'rect'); 
       circle = document.createElementNS(svgNS, 'circle'); 


        rect.setAttribute('id', "rec1"); 
        rect.setAttribute('x', 224); 
        rect.setAttribute('y', 34); 
        rect.setAttribute('width', 188); 
        rect.setAttribute('height', 68);      
        rect.setAttribute('class', "draggableOrgUnit");     
        rect.setAttribute('transform', "matrix(1 0 0 1 0 0)");      
        rect.setAttribute('onmousedown', "selectElement(event)");          
        //rect.setAttribute('onmouseup', "drop(event)"); 

        circle.setAttribute('id', "c0"); 
        circle.setAttribute('cx', "224"); 
        circle.setAttribute('cy', "34"); 
        circle.setAttribute('r', "5"); 
        circle.setAttribute('onclick', "closeMe()"); 
        circle.setAttribute('fill', "blue"); 

輸出：

<svg> 
    <g> 
    <g> 
    <rect> 
    <circle> 
    </g> 
    ... 
    <g> 
</svg> 

林僅測試這個矩形。一旦這個工作，其他人將遵循相同的邏輯。

Answer 1

您可以將rect和您的點擊關閉元素放置在<g>元素中。然後放置矩形你將翻譯<g>到所需的位置。如果需要，還可以通過翻譯拖放<g>。

下面的示例顯示了一個圓形作爲點擊關閉元素，放置在矩形的右上角。取而代之的是圓的，你也可以使用一個<image>元素按您的例子：

<g transform="translate(200 200)"> 
<rect width=50 height=25 fill=red /> 
<circle onclick=closeMe() r=5 fill=blue cx=43 cy=5 /> 
</g>