1

Quiero que al dar click dentro del cuadrado gris, se dibuje un cuadrado en de 10px x 10px en el lugar que hice click, agrego el elemento dentro del SVG, pero no lo dibuja.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
</head>
<body>
    <svg width="1000" height="1000" id="cuadro" class="map-row" style="background-color: rgba(0,0,0,0.5); margin-left:0px;margin-top:0px;" onmousemove="moveMouse(event)" onclick="drawRect(event)">
        <rect x="460" y="130" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="460" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="460" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="470" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="470" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
    </svg>

<script>
    function moveMouse(event){
        //console.log(event.clientX+"-"+event.clientY);
    }

    function drawRect(event){
        console.log("click");
        console.log(event.clientX+"-"+event.clientY);
        printRect(event.clientX,event.clientY);
    }

    function printRect(x,y){
        $("#cuadro").append(`<rect x="${x}" y="${y}" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>`);
    }
</script>   
</body>
</html>

1 respuesta 1

2

Según https://stackoverflow.com/a/3642265/1423096

Al pasarle un string a $ se interpreta con la propiedad .innerHTML propia del navegador, la cual no interpreta SVG u otro elemento no-HTML y además no sabe que "<rect>" es parte del espacio SVG.

Da dos soluciones, transcribo la primera:

 function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }
 
 function moveMouse(event){
        //console.log(event.clientX+"-"+event.clientY);
    }

    function drawRect(event){
        console.log("click");
        console.log(event.clientX+"-"+event.clientY);
        printRect(event.clientX,event.clientY);
    }

    function printRect(x,y){
       var rect= makeSVG("rect", {x: x, y:y, width:10, height:10, fill:"#c4ecea", stroke:"#3B4152", style:"stroke-width: 0.5px"})
        document.getElementById("cuadro").appendChild(rect);
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
</head>
<body>
    <svg width="1000" height="1000" id="cuadro" class="map-row" style="background-color: rgba(0,0,0,0.5); margin-left:0px;margin-top:0px;" onmousemove="moveMouse(event)" onclick="drawRect(event)">
        <rect x="460" y="130" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="460" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="460" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="470" y="110" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
        <rect x="470" y="120" width="10" height="10" fill="#c4ecea" stroke="#3B4152" style="stroke-width: 0.5px" ></rect>
    </svg>
</body>
</html>

En resumen: Se crea un nodo SVG y se lo adiciona como child al SVG principal, esquivando al jQuery.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.