楼主

动态svg制作 <svg width="250" height="500"> <!-- Set the background to black. To see better how this all works, set the fill style below to red --> <rect id="refBox" x="0" y="0" height="500" width="250" style="fill:black"/> <!-- Set the text. Make it vertical by rotating the whole group 90 degrees --> <g transform="rotate(90)" style="font-size: 14; fill: rgb(0,255,0); font-family:wingdings;"> <text y="-15">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNO</text> <text y="-30">hjkrdohjkh984743984u9nfdsno8hIH32mnfoj2joi</text> <text y="-45">gfjdJKLNGKLFDMVKjfklwjr9jfmopekr98j5jr83j</text> <text y="-60">KHJghjghjghjghj5Kkku373828OIJGnoigopdmoi4</text> <text y="-75">KHJGJDGFGFDGfklm5kfjjoijoifjkfjofdgjdij04</text> <text y="-90">hfgmkgmoi4jgdklm9898nmnkluhn98U09798fdgfd</text> <text y="-105">fdngdgdkfdggfdgg65R76G76F6BUJHB6JNBBNJHUI</text> <text y="-120">hjkrdohjkh984743984u9nfdsno8hIH32mnfoj2joi</text> <text y="-135">gfjdJKLNGKLFDMVKjfklwjr9jfmopekr98j5jr83j</text> <text y="-150">KHJKHJKVFDSFDSFDSmdngdnuifOIJGnoigopdmoi4</text> <text y="-165">KHJGJDGFGFDGfklm5kfjjoijoifjkfjofdgjdij04</text> <text y="-180">hfgmkgmoi4jgdklm9898nmnkluhn98U09798fdgfd</text> <text y="-195">fdngdgdkfdggfdgg65R76G76F6BUJHB6JNBBNJHUI</text> <text y="-210">hfgmkgmoi4jgdklm9898nmnkluhn98U09798fdgfd</text> </g> <!-- Create the scroll effect by moving a rectangle from the the top to the bottom across the text --> <!-- Also vary the opacity slightly for a cool effect --> <rect id="anim1" x="0" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="10s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <!-- Repeat it for each column of text, varying the start time and duration each time --> <rect id="anim2" x="15" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="8s" begin="1s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="5s" repeatCount="indefinite" />   </rect> <rect id="anim3" x="30" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="5s" begin="2s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim4" x="45" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="6s" begin="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim5" x="60" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="13s" begin="4s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="12s" repeatCount="indefinite" />   </rect> <rect id="anim6" x="75" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="9s" repeatCount="indefinite" />   </rect> <rect id="anim7" x="90" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="3s" begin="5s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim8" x="105" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="5s" begin="6s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim9" x="120" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="3s" begin="7s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim10" x="135" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="3s" begin="8s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="4s" repeatCount="indefinite" />   </rect> <rect id="anim11" x="150" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="10s" begin="6s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="8s" repeatCount="indefinite" />   </rect> <rect id="anim12" x="165" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="3s" begin="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="3s" repeatCount="indefinite" />   </rect> <rect id="anim13" x="180" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="5s" begin="5s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="8s" repeatCount="indefinite" />   </rect> <rect id="anim14" x="195" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="13s" begin="2s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="8s" repeatCount="indefinite" />   </rect> <rect id="anim15" x="210" y="0" width="14" height="500" style="fill:black"> <animate attributeName="y" from="-500" to="500" dur="5s" begin="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="0.5" to="1" dur="12s" repeatCount="indefinite" />   </rect> <!-- Add an extra rectangle as a background for the DVworks text --> <rect id="anim16" x="10" y="238" width="0" height="15" style="fill:black"> <animate attributeName="width" from="0" to="240" dur="18s"  begin="5s" fill="freeze" />   </rect> <!-- Create a text drop in by animating the y co-ordinate 1 letter at a time --> <!-- and staggering the start time of each letter --> <g style="font-size: 14; fill: white;"> <!-- Start the text off the top of the page and then scroll it down --> <text x="15" y="-10">D <animate attributeName="y" from="0" to="250" dur="1s"  begin="5s" fill="freeze" />   </text> <text x="30" y="-10">E <animate attributeName="y" from="0" to="250" dur="1s"  begin="6s" fill="freeze" />   </text> <text x="45" y="-10">V <animate attributeName="y" from="0" to="250" dur="1s"  begin="7s" fill="freeze" />   </text> <text x="60" y="-10">E <animate attributeName="y" from="0" to="250" dur="1s"  begin="8s" fill="freeze" />   </text> <text x="75" y="-10">L <animate attributeName="y" from="0" to="250" dur="1s"  begin="9s" fill="freeze" />   </text> <text x="90" y="-10">O <animate attributeName="y" from="0" to="250" dur="1s"  begin="10s" fill="freeze" />   </text> <text x="105" y="-10">P <animate attributeName="y" from="0" to="250" dur="1s"  begin="11s" fill="freeze" />   </text> <text x="120" y="-10">E <animate attributeName="y" from="0" to="250" dur="1s"  begin="12s" fill="freeze" />   </text> <text x="135" y="-10">R <animate attributeName="y" from="0" to="250" dur="1s"  begin="13s" fill="freeze" />   </text> <text x="150" y="-10">W <animate attributeName="y" from="0" to="250" dur="1s"  begin="14s" fill="freeze" />   </text> <text x="165" y="-10">O <animate attributeName="y" from="0" to="250" dur="1s"  begin="15s" fill="freeze" />   </text> <text x="180" y="-10">R <animate attributeName="y" from="0" to="250" dur="1s"  begin="16s" fill="freeze" />   </text> <text x="195" y="-10">K <animate attributeName="y" from="0" to="250" dur="1s"  begin="17s" fill="freeze" />   </text> <text x="210" y="-10">S <animate attributeName="y" from="0" to="250" dur="1s"  begin="18s" fill="freeze" />   </text> </g> </svg>    收藏   分享   顶(0)    关闭广告显示

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

	第2楼

还蛮好玩得

	第3楼

这个就是实现乱码效果的所在 font-family:wingdings

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

	第4楼

对SVG感兴趣的也太少了，好可怜呐，欣赏一点好不好。

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

	第5楼

还可以嘛

	第6楼

svg要实用才好推广，比如有气象网站如此应用： http://www.fs121.com/record/typhoon-svg.html

	第7楼

应用上还可以，效果不太完美 以下是引用rido在2004-8-11 8:37:47的发言： svg要实用才好推广，比如有气象网站如此应用： http://www.fs121.com/record/typhoon-svg.html 该页面上编码有错误，不能正常显示汉字，因为它原码格式为西欧字符。

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

	第8楼

我再发一张你看看效果如何

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。

	第9楼

不错啊，佩服 高手啊！我有个问题想问你，就是在这个文件里面为什么我做一次开窗放大后，再继续开窗放大就不行了！ <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg id="MainMap" x="0px" y="0px" width="100%" height="100%" onload="Ini(evt)"> <script><![CDATA[ var opinion; var mx1; var my1; var svgdoc; function Ini(evt) {  svgdoc=evt.getTarget().getOwnerDocument();  //alert(evt); } function abcout(evt) { opinion=1;   var mx=evt.clientX;   var my=evt.clientY;       mx1=mx;       my1=my;    //alert(mx1+"\n"+my1);        } function fangqi(evt) {        opinion=0;        kuang=svgdoc.getElementById('s123');        //svgdoc.remove(kuang);        kuang=svgdoc.getElementById('s123');  kuang.setAttribute('x',0);         kuang.setAttribute('y',0);  kuang.setAttribute('width',0);  kuang.setAttribute('height',0); } function huakuang(evt) {  //alert(opinion);  if(opinion==1)  {         var mx2=evt.clientX;         var my2=evt.clientY;  var kuang;  var kuandu;  var gaodu;  kuandu=mx2-mx1;  gaodu=my2-my1;  //alert(kuandu+"\n"+gaodu);         kuang=svgdoc.getElementById('s123');  kuang.setAttribute('x',mx1);         kuang.setAttribute('y',my1);  kuang.setAttribute('width',kuandu);  kuang.setAttribute('height',gaodu);           } }   ]]> </script> <rect id="kongzhi"  x="0" y="0" width="100%" height="100%" style="fill:green;opacity:0.5;stroke:blue"   onmousedown="abcout(evt)" onmousemove="huakuang(evt)" onmouseup="fangqi(evt)"/> <rect id="s123"  x="0" y="0" width="100" height="100" fill="black" opacity="0.3" stroke="blue" onmouseup="fangqi(evt)" /> </svg>

	第10楼

不知道你最终要实现什么效果，这里SCRIPT里面所捕捉的鼠标坐标是相对坐标系里的位置，在放大后所显示的是相对位置，所以放大后并不是你想象的效果。这里你可以建立绝对坐标系来实现。

----------------------------------------------
事业是国家的，荣誉是单位的，成绩是领导的，工资是老婆的，财产是孩子的，错误是自己的。