Skip to content

Instantly share code, notes, and snippets.

@jdowner

jdowner/example.html

Created August 13, 2014 10:58
Show Gist options
  • Save jdowner/e38bf3795ad6cfe785f4 to your computer and use it in GitHub Desktop.
Save jdowner/e38bf3795ad6cfe785f4 to your computer and use it in GitHub Desktop.
Download ZIP
Example of SVG interaction and transformation
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>svg-example</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.bottom {
fill: blue;
stroke: blue;
}
.front {
stroke: black;
fill: none;
pointer-events: all;
}
</style>
</head>
<body>
<svg width="1250px" height="50">
</svg>
<svg id="canvas" x="100px" width="1250px" height="536">
<defs>
<g id="def-box">
<path d="M -5 -5 L 5 -5 L 5 5 L -5 5 z" />
</g>
</defs>
<path id="bottom-rect" class="bottom" d="M 10 0 L 100 0 L 100 100 L 10 100 z" />
<path id="front-rect" class="front" d="M 10 0 L 200 0 L 200 50 L 10 50 z" />
</svg>
</body>
<script>
function on_click(e){
var svg = document.getElementById("canvas");
var obj = document.createElementNS("http://www.w3.org/2000/svg", "use");
obj.setAttributeNS(null, "x", e.clientX);
obj.setAttributeNS(null, "y", e.clientY);
obj.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#def-box");
var trans = svg.createSVGTransform();
trans.setMatrix(svg.getScreenCTM().inverse());
console.log(trans);
obj.transform.baseVal.appendItem(trans);
obj.transform.baseVal.consolidate();
svg.appendChild(obj);
}
$(document).ready(function(){
$('#front-rect').click(on_click);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment