Skip to content

Instantly share code, notes, and snippets.

@charlycoste

charlycoste/script.js

Last active Aug 29, 2015
Embed
What would you like to do?
document.onmousemove = function(e){
var rect = document.getElementById('r');
rect.setAttribute('x',e.clientX-(rect.getAttribute('width')/2));
rect.setAttribute('y',e.clientY-(rect.getAttribute('height')/2));
};
document.onclick = function(e){
var point = document.createElementNS("http://www.w3.org/2000/svg",'rect');
var rect = document.getElementById('r');
point.setAttribute('x', e.clientX-50);
point.setAttribute('y', e.clientY-50);
point.setAttribute('width', 100);
point.setAttribute('height', 100);
document.getElementById('root').appendChild(point);
}
svg {
cursor: none;
}
rect {
fill:red;
stroke:black;
stroke-width:5;
opacity:0.5
}
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="svg-stylesheets.css" ?>
<svg id="root" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="script.js" />
<rect id="r" x="50" y="20" rx="20" ry="20" width="150" height="150" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment