jdowner/example.html

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