以文本方式查看主题

-  计算机科学论坛  (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

--  应用上还可以，效果不太完美
以下是引用rido在2004-8-11 8:37:47的发言：
svg要实用才好推广，比如有气象网站如此应用：
http://www.fs121.com/record/typhoon-svg.html

该页面上编码有错误，不能正常显示汉字，因为它原码格式为西欧字符。

--  作者：卷积内核
--  发布时间：8/11/2004 11:21:00 AM

--  
我再发一张你看看效果如何
--  作者：wisd0m
--  发布时间：8/11/2004 8:52:00 PM

--  
不错啊，佩服

高手啊！我有个问题想问你，就是在这个文件里面为什么我做一次开窗放大后，再继续开窗放大就不行了！

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

--  作者：卷积内核
--  发布时间：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

--  
以下是引用卷积内核在2004-8-10 15:08:47的发言：
对SVG感兴趣的也太少了，好可怜呐，欣赏一点好不好。

就是！

不过我算一个爱好者。我来积极参与！

--  作者：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);">
  <text id="textid1" x="0" y="10">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.1s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.1s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  <text id="textid2" x="0" y="20">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.2s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.2s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  <text id="textid3" x="0" y="30">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.3s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.3s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  <text id="textid4" x="0" y="40">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.4s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.4s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  <text id="textid5" x="0" y="50">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.5s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.5s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  <text id="textid6" x="0" y="60">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.6s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
  <animate attributeName="opacity" from="1" to="0.1" dur="1s" begin="0.6s" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"/>
  </text>
  </g>
  </defs>

<rect id="refBox" x="0" y="0" height="100" width="776" style="fill:black"/>

<!-- This is a logo of the state -->
  <g id="g_logo">

    <!-- Set the text. Make it vertical by rotating the whole group 90 degrees -->
<use xlink:href="#move1" transform="translate(10 -50)">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.1s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(30 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.2s" begin="0.3s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(50 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.5s" begin="0.1s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(70 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.1s" begin="0.2s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(90 -50)">
  <animate attributeName="y" from="0" to="100" dur="1s" begin="0.4s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(110 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.3s" begin="0.1s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(130 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.2s" begin="0.2s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
<use xlink:href="#move1" transform="translate(150 -50)">
  <animate attributeName="y" from="0" to="100" dur="1.1s" begin="0.3s" repeatCount="indefinite" fill="freeze" accumulate="none" additive="replace" calcMode="linear" restart="always"/>
</use>
</svg>

--  作者：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号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 156.250ms