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和click-to-close元素放在<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>

以交互方式从浏览器中删除SVG元素

1 个答案: