svg鼠标响应事件的四种方法

鼠标响应事件的四种方法，以click事件为例。


Mouse Events - SMIL

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="5" y="5" width="40" height="40" fill="red">
        <set attributeName="fill" to="blue" begin="click"/>
    </rect>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/svg_smil/click.svg

Mouse Events - Attributes

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        function changeColor(evt) {
            var rect = evt.target;
           
            rect.setAttributeNS(null, "fill", "purple")
        }
    ]]></script>
    <rect x="5" y="5" width="40" height="40" fill="red"
          onclick="changeColor(evt)"/>
</svg>

实例演示：

http://www.kevlindev.com/tutorials/basics/events/mouse/svg_js/onclick.svg

Mouse Events - JavaScript+SMIL

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="makeShape(evt)"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var svgns = "http://www.w3.org/2000/svg";
        function makeShape(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
           
            var rect = svgDocument.createElementNS(svgns, "rect");
            rect.setAttributeNS(null, "x", "5");
            rect.setAttributeNS(null, "y", "5");
            rect.setAttributeNS(null, "width", "40");
            rect.setAttributeNS(null, "height", "40");
            rect.setAttributeNS(null, "fill", "green");
           
            var set = svgDocument.createElementNS(svgns, "set");
            set.setAttributeNS(null, "attributeName", "fill");
            set.setAttributeNS(null, "to", "blue");
            set.setAttributeNS(null, "begin", "click");
           
            rect.appendChild(set);
            svgDocument.documentElement.appendChild(rect);
        }
    ]]></script>
</svg>
实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom_smil/click_js_smil.svg

Mouse Events - EventListener

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
    <!ATTLIST svg
              xmlns:a3 CDATA #IMPLIED
              a3:scriptImplementation CDATA #IMPLIED>
    <!ATTLIST script
              a3:scriptImplementation CDATA #IMPLIED>
]>
<svg onload="makeShape(evt)"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     a3:scriptImplementation="Adobe">
    <script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
        var svgns = "http://www.w3.org/2000/svg";
        function makeShape(evt) {
            if ( window.svgDocument == null )
                svgDocument = evt.target.ownerDocument;
           
            var rect = svgDocument.createElementNS(svgns, "rect");
            rect.setAttributeNS(null, "x", 5);
            rect.setAttributeNS(null, "y", 5);
            rect.setAttributeNS(null, "width", 40);
            rect.setAttributeNS(null, "height", 40);
            rect.setAttributeNS(null, "fill", "green");
           
            rect.addEventListener("click", changeColor, false);
           
            svgDocument.documentElement.appendChild(rect);
        }
       
        function changeColor(evt) {
            var target = evt.target;
            target.setAttributeNS(null, "fill", "purple");
        }
    ]]></script>
</svg>

实例演示：http://www.kevlindev.com/tutorials/basics/events/mouse/js_dom/click_js.svg