JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div class="button">
Make Circle
</div>
<div id="svg_wrapper">
<svg id='a' version='1.1' xmlns='http://www.w3.org/2000/svg' width="1000px" height="1000px" viewBox="0 0 1000 1000">
</svg></div>

CSS

.button{
    width: 100px;
    height: 100px;
    background: #a00;
}

#a{
    width: 1000px;
    height: 1000px;
}

JavaScript

function makeCircle(event) {
    var mouseX = (event.clientX) * 10;
    var mouseY = (event.clientY) * 10;
    var object = document.getElementById("a");
    $(object).append("<circle cx='" + mouseX + "' cy='" + mouseY + "' r='10' fill='red' stroke='black' stroke-width='1' />");
    $("#svg_wrapper").html( $("#svg_wrapper").html());
}

$(document).ready(function(){
    $(".button").click(makeCircle);
});