以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (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=24807)

--  作者：wujiabao
--  发布时间：11/29/2005 4:15:00 PM

--  那为高人会用svg做一个下雨的场景呀
那为高人会用svg做一个下雨的场景呀
--  作者：xiaozhu
--  发布时间：11/29/2005 4:57:00 PM

--  
可不可以让雨滴沿着规定好的路径运动形成雨
--  作者：zhuqingjie
--  发布时间：12/6/2005 7:09:00 PM

--  
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="610" viewBox="-15 -5 1000 610">
<des>
<path id="sanjiao" d="M30,0 L0,27 L60,27Z" style="fill:lawngreen"/>
<rect id="shugan" x="0" y="0" width="18" height="153" style="fill:darkred"/>
<rect id="chuanghu" x="0" y="0" width="15" height="15" style="fill:white;stroke-width:1;stroke:black"/>
<rect id="men" x="0" y="0" width="15" height="15" style="fill:white"/>


<g id="graycloud">
<circle cx="50" cy="50" r="25" style="fill:gray"/>
<circle cx="30" cy="40" r="25" style="fill:gray"/>
<circle cx="70" cy="30" r="25" style="fill:gray"/>
<circle cx="100" cy="40" r="25" style="fill:gray"/>
<circle cx="90" cy="50" r="25" style="fill:gray"/>
</g>

<radialGradient id="rg1" cx="500" cy="300" r="300" fx="500" fy="300" gradientUnits="userSpaceOnUse">
     
     <stop offset="50%" style="stop-color:dodgerblue"/>
     <stop offset="60%" style="stop-color:yellow"/>
     <stop offset="65%" style="stop-color:red"/>
     <stop offset="70%" style="stop-color:skyblue"/>
     <stop offset="75%" style="stop-color:lawngreen"/>
     <stop offset="80%" style="stop-color:dodgerblue"/>
     <stop offset="90%" style="stop-color:dodgerblue"/>
    </radialGradient>
<clipPath id="path" style="clip-rule:nonezero">
  <path d="M270,60 L270,200 L730,200 L730,60Z"/>
</clipPath>


</des>
<rect x="0" y="0" width="1000" height="610" style="fill:dodgerblue"/>
<use xlink:href="#sanjiao" transform="translate(100,320)"/>
<use xlink:href="#sanjiao" transform="translate(85,347)scale(1.5)"/>
<use xlink:href="#sanjiao" transform="translate(70,387)scale(2)"/>
<use xlink:href="#shugan" transform="translate(123,441)"/>

<use xlink:href="#sanjiao" transform="translate(220,320)"/>
<use xlink:href="#sanjiao" transform="translate(205,347)scale(1.5)"/>
<use xlink:href="#sanjiao" transform="translate(190,387)scale(2)"/>
<use xlink:href="#shugan" transform="translate(243,441)"/>

<use xlink:href="#sanjiao" transform="translate(700,320)"/>
<use xlink:href="#sanjiao" transform="translate(685,347)scale(1.5)"/>
<use xlink:href="#sanjiao" transform="translate(670,387)scale(2)"/>
<use xlink:href="#shugan" transform="translate(723,441)"/>

<use xlink:href="#sanjiao" transform="translate(820,320)"/>
<use xlink:href="#sanjiao" transform="translate(805,347)scale(1.5)"/>
<use xlink:href="#sanjiao" transform="translate(790,387)scale(2)"/>
<use xlink:href="#shugan" transform="translate(843,441)"/>

<path id="fangsanjiao" d="M460,347 L370,442 L550,442Z" style="fill:darkred"/>
<rect id="fangjuxing" x="400" y="442" width="120" height="268" style="fill:darkorange"/>
<use xlink:href="#chuanghu" transform="translate(420,462)"/>
<use xlink:href="#chuanghu" transform="translate(436,462)"/>
<use xlink:href="#chuanghu" transform="translate(420,478)"/>
<use xlink:href="#chuanghu" transform="translate(436,478)"/>

<use xlink:href="#men" transform="translate(470,510)scale(3,5)"/>

<circle id="taiyang" cx="800" cy="100" r="30" style="fill:red">
</circle>
<g id="cloudGroup">
<use id="cloud1" xlink:href="#graycloud" x="1000" y="50"/>
<use id="cloud2" xlink:href="#graycloud" x="1000" y="100"/>
<use id="cloud3" xlink:href="#graycloud" x="-150" y="70"/>

</g>
<g id="caicai" style="opacity:0;">
<circle id="rainbow" cx="500" cy="600" r="600" style="fill:url(#rg1);clip-path:url(#path)"/>
</g>
<g id="shandian" style="opacity:0;">
<path id="shadian1" d="M330,130 L300,160 L330,160 L300,190" style="stroke-width:3;stroke:purple"/>

<path id="shadian2" d="M800,130 L770,160 L800,160 L770,190" style="stroke-width:3;stroke:purple"/>
</g>


<g id="donghua">
<animate id = "yun1" xlink:href="#cloud1"
attributeName="x"
from="1000"
to="750"
begin="0s"
dur="6s"
fill="freeze"/>
<animate id = "yun2" xlink:href="#cloud2"
attributeName="x"
from="1000"
to="300"
begin="0s"
dur="10s"
fill="freeze"/>
<animate id = "yun3" xlink:href="#cloud3"
attributeName="x"
from="-100"
to="700"
begin="0s"
dur="10s"
fill="freeze"/>
<animate id = "shanshan" xlink:href="#shandian"
attributeName="opacity"
from="0"
to="1"
begin="10"
dur="0.2s" repeatCount="5"
fill="freeze"/>
<animate id = "shanshan" xlink:href="#shandian"
attributeName="opacity"
from="1"
to="0"
begin="11"
dur="0.1s"
fill="freeze"/>
<circle cx="10" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="50" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="100" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.2s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="150" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="200" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="250" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.5s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="300" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="350" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="400" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="450" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.2s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="500" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="550" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="16.3s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="600" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.5s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="650" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="700" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.2s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="750" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.3s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="800" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="850" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.8s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="900" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="950" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.5s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="1000" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
</g>
<g>
<circle cx="10" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="50" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.8s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="100" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.9s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="150" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.5s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="200" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="250" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.8s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="300" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.9s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="350" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.7s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="400" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.96s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="450" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.2s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="500" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.1s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="550" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.4s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="600" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.8s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="650" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.7s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="700" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.75s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="750" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.4s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="800" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.7s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="850" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.8s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="900" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.33s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="950" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.5s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<circle cx="1000" cy="-3" r="2" style="fill:white">
<animate attributeName="cy" begin="11.86s" dur="0.7s" from="2" to="600" repeatCount="20"/>
</circle>
<animate id = "yun1" xlink:href="#cloud1"
attributeName="x"
from="750"
to="1000"
begin="22s"
dur="6s"
fill="freeze"/>
<animate id = "yun2" xlink:href="#cloud2"
attributeName="x"
from="300"
to="1000"
begin="22s"
dur="10s"
fill="freeze"/>
<animate id = "yun3" xlink:href="#cloud3"
attributeName="x"
from="700"
to="-150"
begin="22s"
dur="10s"
fill="freeze"/>
<animate id = "caihong" xlink:href="#caicai"
attributeName="opacity"
from="0"
to="1"
begin="27s"
dur="3s"
fill="freeze"/>
<animate id = "taitai" xlink:href="#taiyang"
attributeName="cx"
from="800"
to="900"
begin="17s"
dur="10s"
fill="freeze"/>
<animate id = "taitai" xlink:href="#taiyang"
attributeName="cy"
from="100"
to="50"
begin="17s"
dur="7s"
fill="freeze"/>
</g>
</svg>

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