SVG Dots

by Shaun Ellis

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="contentContainer" style="cursor: pointer;position:relative;overflow:hidden;width:467px;height:375px">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="canvas" viewBox="0 0 467 375">
				  <circle id="dot" class="dots" cx="34.4" cy="15.4" r="2.2" />  
		</svg>
</div>
<form><textarea id="code" cols="30" rows="5" style="resize: none; overflow-y: hidden; height: 85px;"></textarea></form>

CSS

#canvas {
  width: 100%;
    height: 100%;
    margin-right: 0px;
    font: 1em source-sans-pro, Source Sans Pro, Helvetica, sans-serif;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: blue;
}

.dots {
  fill: red;
}

JavaScript

function SVG(elementName) {
				return document.createElementNS('http://www.w3.org/2000/svg', elementName);
			}

var container = $( "#contentContainer" );

$( container ).on( "click", function(event) {

  var xPosition = event.clientX - this.getBoundingClientRect().left;
  var yPosition = event.clientY - this.getBoundingClientRect().top;

  var circle = SVG('circle');
  $(circle).attr( { class: "dots", cx: parseInt(xPosition),
                   cy: parseInt(yPosition),
                  r: 2.2 } );

  $( "#canvas" ).append(circle);
	var box = $("#code");
  var coords = "x:" + parseInt(xPosition) + ", y:" + parseInt(yPosition);
  box.val(box.val() + coords);
});