SVG动态创建图形

如果用户希望自己在SVG画布上作图，那么我们就无法预知图形相对于坐标原点的位置，这个时候就需要用到鼠标右键创建相应事件，获得鼠标右键落下时的（X，Y）坐标点。然后以该点为新的坐标原点，制作SVG图形：例如在离浏览器坐标原点（100,100）处画一个圆形：

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g width='100%' height='100%' transform='translate(100,100)'>
<circle cx="0" cy="0" r="20" stroke="black"
stroke-width="2" fill="red"/>
</g>
</svg>

图中红色代码表示新坐标系位于原始坐标系的（100,100）处；

蓝色代码此圆的圆心参照新坐标系是（0，0），参照旧坐标系是（100,100）；