javascript SVG的动画，脚本，事件

svg支持鼠标单击、鼠标移动和鼠标按下，动画，脚本响应事件。

svg支持鼠标事件的例子：

<?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">

<circle cx="350" cy="350" r="100" stroke="black"

stroke-width="2" fill="red">

   <set attributeName="fill" form="red" to="green" begin="mouseover" end="mouseout" />

   <set attributeName="r"  from="100" to="200" begin="mousedown" end="mouseup"/>

</circle>

</svg>

讲解：在这个例子中，set作为一个动画的设置，主要的属性：attributeName，是它父节点图形结构中已经配置的属性。from,to配置属性的变化边界。begin,end配置属性变化的开始时间和结束时间。

svg鼠标事件例子

<?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">

    <rect id="changeToRed" x="20" y="20" width="25" height="25" rx="5" 

          ry="5" style="fill:lightgrey"/>

    <text x="50" y="35" font-size="14">Move over for red text</text>

    <rect id="bigText" x="20" y="60" width="25" height="25" rx="5" 

          ry="5" style="fill:lightgrey"/>

    <text x="50" y="75" font-size="14">Move over for big text</text>

    <rect id="bigRedText" x="20" y="100" width="25" height="25" rx="5" 

          ry="5" style="fill:lightgrey"/>

    <text x="50" y="115" font-size="14">Click me for big red text</text>

    <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"/>

        <set attributeName="font-size" from="14" to="50" 

              begin="bigText.mouseover" end="bigText.mouseout"/>

        <set attributeName="font-size" from="14" to="50" 

              begin="bigRedText.click" end="bigRedText.mouseout"/>

        <set attributeName="fill" from="black" to="red" 

              begin="bigRedText.click" end="bigRedText.mouseout"/>

    </text>

</svg>

在这个例子中，仔细观察他们的区别就会发现。begin，end与上个例子的不一样。

动画的效果示例

<?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">

<circle cx="350" cy="350" r="100" stroke="black"

stroke-width="2" fill="red">   

   <animate attributeName="opacity" from="1" to="0" begin="mouseover" dur="5s"/>

</circle>

</svg>

本例子中的动画效果是透明度效果逐渐在加强，当5秒钟结束后恢复到初始状态。开始时间是鼠标移动到图像上。从这个例子中可以看到，只要是svg图形的属性都可以做出渐变的效果。

这个动画效果也可以是多个一起变化。

<?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">

<circle cx="350" cy="350" r="100" stroke="black"

stroke-width="2" fill="red" >

   <animate attributeName="opacity" from="1" to="0" begin="mouseover" dur="5s"

   />

   <animate attributeName="r" from="100" to="300" begin="mouseover" dur="10s"/>

</circle>

</svg>

这两个动画效果会在一个动作中体现。

下面是线性渐变的例子

<?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">

<defs>

<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="100%">

<stop offset="0%" style="stop-color:rgb(255,255,0);

stop-opacity:1"/>

<stop offset="100%" style="stop-color:rgb(255,0,255);

stop-opacity:1"/>

</linearGradient>

</defs>

<circle cx="200" cy="190" r="100"

style="fill:url(#orange_red)"/>

</svg>

分析：

在使用线性渐变的时候，首先要提供线性渐变的一个集合，或者是定义一个线性变化的区间。用defs标签去定义它。

在使用的时候，要以url（#id）的形式或者样子去调用线性渐变集合。在线性渐变集合中，要定义两个要素，第一个要素是起始边界。第二个是终止边界。

放射性渐变的例子

<?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">

<defs>

<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"

fx="75%" fy="75%">

<stop offset="0%" style="stop-color:rgb(255,0,0);

stop-opacity:0"/>

<stop offset="100%" style="stop-color:rgb(0,0,255);

stop-opacity:1"/>

</radialGradient>

</defs>

<circle cx="230" cy="200" r="100"

style="fill:url(#grey_blue)"/>

</svg>

说明：在图形当中cx，cy，r属性会定义一个圆形的边界，这个边界是终止渐变的边界。fx，fy会定义一个点，这个点将会是渐变的起始点。实际上放射性渐变的范围是从起始点到边界的范围。 <radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 circle 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置 。

svg的动画效果示例：

<?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">

<title>Simple transform animations</title>

<defs>

   <style type="text/css"><![CDATA[

     .touchable { fill: orange; stroke: none; }

     .touchable:hover { stroke: black; stroke-width: 0.2cm; }

   ]]></style>

</defs>

<circle class="touchable" cx="1cm" cy="1cm" r="1cm">

    <animateTransform attributeName="transform" 

attributeType="XML"

             type="scale" from="1" to="5"

begin="0s" dur="8s"

             fill="freeze" />

</circle>

<circle class="touchable" cx="1cm" cy="10cm" r="2cm">

     <animateTransform attributeName="transform" 

 attributeType="XML"

             type="translate" from="1" to="500" 

begin="0s" dur="12s"

             fill="freeze" />

</circle>

</svg>

svg的animateTransform的type属性有translate，scale，rotate，skewX，skewY这个中。type这个属性是需要声明的，如果没有设置这个属性的话，默认属性为translate。form,by,to属性的值设置对不同type是一样：

type="translate"，平动:每个单独的属性设置都是以 <tx>,或者[<tx>,<ty>]

type="scale"，缩放：每个单独的属性值为<sx>,或者[<sx>,<sy>]

type="rotate",旋转：每个单独的属性值设置为<rotate-angle>,或者附加转动中心[<cx><cy>]

type="skewX"和type="skewY",斜交：每个单独的属性设置为<skew-angle>

下面是一个缩放的例子

     <?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">

<rect  x="100" y="100" width="200" height="100">

   <animateTransform attributeName="transform" attributeType="XML" type="scale"

        from="1" to="2" dur="5s" additive="replace" fill="freeze"/>

</rect>

</svg>

但是下面的例子结果与上面的相同

<?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">

<rect  x="100" y="100" width="200" height="100">

   <animateTransform attributeName="transform" attributeType="XML" type="rotate"

        from="0" to="90" dur="5s" additive="replace" fill="freeze"/>

   <animateTransform attributeName="transform" attributeType="XML" type="scale"

        from="1" to="2" dur="5s" additive="replace" fill="freeze"/>

</rect>

</svg>

分析结果：由于设置了additive为replace，它会不断替换前面的动画效果。

但是修改过后的样子，运动的样子是复合在一起的。

<?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">

<rect  x="100" y="100" width="200" height="100">

   <animateTransform attributeName="transform" attributeType="XML" type="rotate"

        from="0" to="15" dur="1s"  fill="freeze"/>

   <animateTransform attributeName="transform" attributeType="XML" type="scale"

        from="1" to="2" dur="1s" additive="sum" fill="freeze"/>

</rect>

</svg>

可设置循环播放次数的动画例子

<?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">

<rect  x="100" y="100" width="200" height="100">

   <animateTransform attributeName="transform" attributeType="XML" type="scale"

        from="2" to="3" repeatCount="3" dur="4s" fill="freeze"/>

</rect>

</svg>

repeatCount为循环次数，dur为每次循环的持续时间

对象的旋转

<?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">

  <defs>

    <style type="text/css"><![CDATA[

      .touchable { fill: orange; stroke: none; }

      .touchable:hover { stroke: black; stroke-width: 0.2cm; }

    ]]></style>

  </defs>

  <circle cx="300" cy="200" r="4cm"/>

  <circle class="touchable" cx="1cm" cy="10cm" r="2cm">

    <animateMotion

      path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100"

      dur="20s" rotate="auto" repeatCount="indefinite"/>

  </circle>

</svg>

这是圆周运动的的例子，实际上这是一个物体对象沿着一个路径的运动的方式。

下面的例子是脚本版的控制

<?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 version="1.1" baseProfile="full"

     xmlns="http://www.w3.org/2000/svg"

     οnlοad="animate(evt)"

>

  <title>SVG example with scripted animation</title>

  <defs>

    <style type="text/css"><![CDATA[

      #target { fill: black; }

    ]]></style>

    <script type="application/javascript"><![CDATA[

var target;

var cx = 0;

var cx_increment = 2;

var redness_increment = 8;

var redness = 0;

var speed = 60;

var maxwidth = 600;

var maxredness = 250;

function animate(evt) {

  target = document.getElementById("target");

  setTimeout("advance()", speed);

}

function advance() {

  cx += cx_increment;

  if ( cx > maxwidth || cx < 0 )

    cx_increment = -cx_increment;

  else

    target.setAttribute("cx", cx);

  redness += redness_increment;

  if ( redness > maxredness || redness < 0 )

    redness_increment = -redness_increment;

  else

    target.style.setProperty("fill", "rgb(" + redness + ",0,0)", "important");

  setTimeout("advance()", speed);

}

    ]]></script>

  </defs>

  <circle id="target" cx="3cm" cy="3cm" r="2cm"/>

</svg>

在svg中添加脚本或者css，都需要这样的格式<script type="application/javascript"><![CDATA[    ]]></script>或者<style type="text/css"><![CDATA[    ]]></style>。这些格式当中type是可以修改的。