Show square added within HTML svg?

Question

Show square added within HTML svg?

Navigation

#1 by (2 votes)

1

I want that by clicking inside the gray square, I draw a square of 10px x 10px in the place I clicked, I add the element inside the SVG, but it does not draw it.

<!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>

javascript jquery html5 svg

asked by Kevin Puscan Ortiz 14.06.2018 в 04:23

source

1 answer

How to pass the value of a SELECT to the same page Run this query from .Bat

score 2 · Accepted Answer

According to link

Passing a string to $ is interpreted with the own .innerHTML property of the browser, which does not interpret SVG or another non-HTML element and also does not know that " <rect> " is part of the SVG space.

Give two solutions, I transcribe the first:

 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>

In summary: An SVG node is created and added as a child to the main SVG, dodging the jQuery.