以文本方式查看主题 - 计算机科学论坛 (http://bbs.xml.org.cn/index.asp) -- 『 SVG/GML/VRML/X3D/XAML 』 (http://bbs.xml.org.cn/list.asp?boardid=21) ---- 动态svg制作 (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=9079) |
-- 作者:卷积内核 -- 发布时间:8/2/2004 10:43:00 AM -- 动态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>
|
-- 作者:awa0508 -- 发布时间:8/2/2004 12:48:00 PM -- 还蛮好玩得 |
-- 作者:卷积内核 -- 发布时间:8/2/2004 5:22:00 PM -- 这个就是实现乱码效果的所在 font-family:wingdings |
-- 作者:卷积内核 -- 发布时间:8/10/2004 3:08:00 PM -- 对SVG感兴趣的也太少了,好可怜呐,欣赏一点好不好。 |
-- 作者:wenmier -- 发布时间:8/10/2004 4:59:00 PM -- 还可以嘛 |
-- 作者:rido -- 发布时间:8/11/2004 8:37:00 AM -- svg要实用才好推广,比如有气象网站如此应用: http://www.fs121.com/record/typhoon-svg.html |
-- 作者:卷积内核 -- 发布时间:8/11/2004 11:12:00 AM -- 应用上还可以,效果不太完美
该页面上编码有错误,不能正常显示汉字,因为它原码格式为西欧字符。 |
-- 作者:卷积内核 -- 发布时间:8/11/2004 11:21:00 AM -- 我再发一张你看看效果如何 |
-- 作者:wisd0m -- 发布时间:8/11/2004 8:52:00 PM -- 不错啊,佩服 高手啊!我有个问题想问你,就是在这个文件里面为什么我做一次开窗放大后,再继续开窗放大就不行了! <?xml version="1.0" encoding="iso-8859-1"?>
var opinion; function Ini(evt) function abcout(evt)
|
-- 作者:卷积内核 -- 发布时间:8/24/2004 5:20:00 PM -- 不知道你最终要实现什么效果,这里SCRIPT里面所捕捉的鼠标坐标是相对坐标系里的位置,在放大后所显示的是相对位置,所以放大后并不是你想象的效果。这里你可以建立绝对坐标系来实现。 |
-- 作者:simplelife -- 发布时间:8/26/2004 6:09:00 PM -- 上面那个访骇客帝国的效果超漂亮 而且只要7K 划算 |
-- 作者:SCYANGYU -- 发布时间:2/18/2005 1:49:00 PM --
就是! 不过我算一个爱好者。我来积极参与! |
-- 作者:zhufeng -- 发布时间:4/25/2005 3:07:00 AM -- 参照楼主的思路和论坛里贴的有关动态产生文本的例子,我做了一个,请高手指点,本人觉得重复用了几个Math.random()函数,CPU占用率比较高,不知那个高手能改进一下,还有一个问题就是代码重复太多。 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg> <svg width="200" height="100" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" zoomAndPan="magnify" onload="text_random()"> <!-- Set the background to black. To see better how this all works, set the fill style below to red --> <defs> <script type="text/javascript"> <![CDATA[ var svgroot,text1,text2,text3,text4,text5,text6; svgroot=document.documentElement; text1=svgroot.getElementById("textid1"); text2=svgroot.getElementById("textid2"); text3=svgroot.getElementById("textid3"); text4=svgroot.getElementById("textid4"); text5=svgroot.getElementById("textid5"); text6=svgroot.getElementById("textid6"); function text_random() { var t; t=Math.round(Math.random(5)*10+0.5)-1; text1.firstChild.data=t; t=Math.round(Math.random(5)*10+0.5)-1; text2.firstChild.data=t; t=Math.round(Math.random(5)*10+0.5)-1; text3.firstChild.data=t; t=Math.round(Math.random(5)*10+0.5)-1; text4.firstChild.data=t; t=Math.round(Math.random(5)*10+0.5)-1; text5.firstChild.data=t; t=Math.round(Math.random(5)*10+0.5)-1; text6.firstChild.data=t; setTimeout("text_random()",500); } ]]> </script> <g id="move1" style="font-size: 14; fill: rgb(0,255,0);"> <rect id="refBox" x="0" y="0" height="100" width="776" style="fill:black"/> <!-- This is a logo of the state --> <!-- Set the text. Make it vertical by rotating the whole group 90 degrees --> |
-- 作者:keeponline -- 发布时间:4/25/2005 11:48:00 AM -- 我也做了个台风显示的SVG,效果和后台都基本做好。有兴趣的可以找我keeponline75@hotmail.com,或者QQ106076402 |
-- 作者:fubinkun -- 发布时间:5/7/2005 1:30:00 PM -- 不知道是用什么工具做的呀 |
-- 作者:zzzzzz2 -- 发布时间:5/10/2005 11:56:00 PM -- 好强的黑客帝国 啊,佩服!!! |
-- 作者:boysky -- 发布时间:5/13/2005 8:14:00 AM -- 不错不错! |
W 3 C h i n a ( since 2003 ) 旗 下 站 点 苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》 |
125.000ms |