中文XML论坛--svg动画

贴子主题： svg动画

本主题类别:

SVG本身就可以做动画，用Animation，setattribute。另外再加JS，计算和控制时间，效果就更好。
下面可以是一个文件，也可以是两个文件。一个SVG、一个JS，放在同一个目录。
SVG文件内容
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function getData()
{
getURL('changeAnimationValues.js',loaddata) //可以直接把JS内容加这里
}
function loaddata(data)
{
if(data.success)
{
  eval("var dynDat = " + data.content);
  for(obj in dynDat)
  {
   try
   {
    var elem = document.getElementById(obj);
    var attr = dynDat[obj];
    for(a in attr) elem.setAttributeNS(null,a,attr[a]);
   }
   catch(e){};
  }
}
}

]]></script>

<defs>
<set xlink:href="#button" attributeName="pointer-events" to="none" in="button.click"/>
<set xlink:href="#bText" attributeName="fill-opacity" to=".3" begin="button.click"/>
<set id="set01" xlink:href="#rect01" attributeName="fill" to="#260" ="rect01.mouseover" end="rect01.mouseout" />
<animate id="anim01" xlink:href="#circ01" attributeName="cx" values="150;200;150;100;150" begin="0" dur="4" repeatCount="indefinite" />
</defs>
<text x="80" y="70" font-size="16" font-family="monospace" font-weight="bold" pointer-events="none">mouse over:</text>
<text x="300" y="70" font-size="16" font-family="monospace" font-weight="bold" pointer-events="none">watch:</text>

<rect id="rect01" x="100" y="100" rx="20" width="100" height="100" fill="#cdd" stroke="none" stroke-width="20"/>

<g transform="translate(230,-60)">
<rect x="90" y="198" ry="12" width="120" height="24" fill="#cdd"/>
<rect x="138" y="178" rx="12" width="24" height="64" fill="#cdd"/>
<circle id="circ01" cx="150" cy="210" r="10" fill="#666"/>
</g>

<g id="button" transform="translate(100,-160)" onclick="getData()">
<a>
  <rect x="102" y="437" rx="5" width="100" height="30" fill="#666" />
  <rect x="100" y="435" rx="5" width="100" height="30" fill="pink" />
  <text id="bText" x="150" y="457" font-size="20" font-family="monospace" font-weight="bold" pointer-events="none" text-anchor="middle">
   change
  </text>
</a>
</g>
</svg>

changeAnimationValues.js
{
set01:{attributeName:'stroke',to:'#620'},
anim01:{attributeName:'cy',values:'210;230;210;190;210',dur:'2'}
}


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	78.125ms