javascript SVG的动画,脚本,事件

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

svg支持鼠标事件的例子:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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


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

svg鼠标事件例子

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

   
          ry="5" style="fill:lightgrey"/>
    Move over for red text
   
          ry="5" style="fill:lightgrey"/>
    Move over for big text
   
          ry="5" style="fill:lightgrey"/>
    Click me for big red text
   
                               fill="black">Change me
       
              begin="changeToRed.mouseover" end="changeToRed.mouseout"/>
       
              begin="bigText.mouseover" end="bigText.mouseout"/>
       
              begin="bigRedText.click" end="bigRedText.mouseout"/>
       
              begin="bigRedText.click" end="bigRedText.mouseout"/>
   


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

动画的效果示例

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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

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

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


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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



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


下面是线性渐变的例子


"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


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




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



分析:
在使用线性渐变的时候,首先要提供线性渐变的一个集合,或者是定义一个线性变化的区间。用defs标签去定义它。
在使用的时候,要以url(#id)的形式或者样子去调用线性渐变集合。在线性渐变集合中,要定义两个要素,第一个要素是起始边界。第二个是终止边界。


放射性渐变的例子

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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


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

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


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



svg的动画效果示例:

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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


Simple transform animations
   
   
attributeType="XML"
             type="scale" from="1" to="5"
begin="0s" dur="8s"
             fill="freeze" />
     
 attributeType="XML"
             type="translate" from="1" to="500" 
begin="0s" dur="12s"
             fill="freeze" />


svg的animateTransform的type属性有translate,scale,rotate,skewX,skewY这个中。type这个属性是需要声明的,如果没有设置这个属性的话,默认属性为translate。form,by,to属性的值设置对不同type是一样:
type="translate",平动:每个单独的属性设置都是以 ,或者[,]
type="scale",缩放:每个单独的属性值为,或者[,]
type="rotate",旋转:每个单独的属性值设置为,或者附加转动中心[]
type="skewX"和type="skewY",斜交:每个单独的属性设置为


下面是一个缩放的例子
     

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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


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

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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



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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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


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


对象的旋转

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

 
   
 
 
 
   
      path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100"
      dur="20s" rotate="auto" repeatCount="indefinite"/>
 


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

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

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

     xmlns="http://www.w3.org/2000/svg"
     οnlοad="animate(evt)"
>
  SVG example with scripted animation
 
   
   
 
 

在svg中添加脚本或者css,都需要这样的格式或者。这些格式当中type是可以修改的。

你可能感兴趣的:(javascript)