SVG基础

SVG事件
onfocusin 在元素获得焦点（如通过指针选择）时触发动作。
onfocusout 在元素失去焦点时（通常在另一元素获得焦点时）触发动作。
onactivate 通过鼠标单击或按下键盘来触发动作，取决于 SVG 元素。
onmousedown 在元素上按下鼠标按钮时触发动作。
onmouseup 在元素上释放鼠标按钮时触发动作。
onclick 在元素上单击鼠标时触发动作。
onmouseover 在指针移动到元素上时触发动作。
onmousemove 指针在元素上时触发动作。
onmouseout 指针从元素上移开时触发动作。
onkeydown 在按住某键时触发动作。
onkeypress 在按某键时触发动作。
onkeyup 释放键时触发动作。
onload 在 SVG 文档被浏览器完全解析之后触发动作。 使用此事件调用一次性初始化功能。
onerror 在元素无法正确载入或发生另一错误时触发动作。
onabort 在元素尚未完全载入页面即停止载入时触发动作。
onunload 在从窗口或框架移去 SVG 文档时触发动作。
onzoom 在缩放级别根据文档改变时触发动作。
onresize 在调整文档视图大小时触发动作。
onscroll 在滚动或平移文档视图

Text
<text x="10" y="60" font-size="60" fill="black" stroke="black">Beijing</text>

Line
<line id="x-axis" style="stroke:lightBlue;stroke-2"  x1="20"  y1="400" x2="1000" y2="400"/>

Circle
cx cy r fill

Rect
x y (起点) width(宽) height(高) rx ry (圆角)

POLYGON
points (1 1,2 2,3 3) fill

Evt
传递事件对象用evt 不能用e

链接
<a xlink:href=""><circle /></a>

另类鼠标交互(set)
1,改变自身（瞬变）
<rect>
    <set attributeName='fill' from='black' to='red' begin='mouseover' end='mouseout'/>
</rect>

2，改变其他元素
<text id="changingText" x="250" y="100" font-size="30" fill="black">Change me
        <set attributeName="fill" from="black" to="red"
              begin="changeToRed.mouseover" end="changeToRed.mouseout"/>
</text>
其中 “changeToRed”是另外一个元素的id

Animate
<rect>
    <animate attributeName='opacity' from='1' to='0' begin='click' dur='1s' fill=restore/>
</rect>
其中animate元素的begin属性可以延迟执行，如begin='click+1s'

键盘触发事件
<rect>
    <animate attribute from to begin="accessKey(1)" dur="1s"></animate> (数字键1)
    //另类    
    <animateTransform attribute="tranform" type="rotate" from to begin="accessKey(2)" dur>//若要指定ASCII码 格式如&#__
    </animate>
    <animateTransform attributeName="transform" type="rotate" from="0" to="180" dur="5s" repeatCount="indefinite"/>
</rect>

鼠标位置
function getSreenCoordinates (evt){
    //evt.clientX
    var left = evt.getScreenX();
    var top = evt.getScreenY();
    return {left,top};
}