中文XML论坛--那为高人会用svg做一个下雨的场景呀

新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚

XML论坛

W3CHINA.ORG讨论区

计算机科学论坛

SOAChina论坛

Blog

开放翻译计划

新浪微博

登录

注册

帮助

>> 本版讨论SVG, GML, X3D, VRML, VML, XAML, AVALON, Batik等基于XML的图形技术，以及有关GIS的应用。

[返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 那为高人会用svg做一个下雨的场景呀

◇查看新帖 ◇ 用户列表 ◇

发表一个新主题

发表一个新投票

回复主题

(订阅本版)

您是本帖的第 3177 个阅读者　　

　

*	贴子主题：那为高人会用svg做一个下雨的场景呀	举报打印推荐 IE收藏夹
	本主题类别:

帅哥哟，离线，有人找我吗？

  等级：大一新生
  文章：8
  积分：82
  门派：XML.ORG.CN
  注册：2005/11/28

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	楼主

那为高人会用svg做一个下雨的场景呀

那为高人会用svg做一个下雨的场景呀

收藏分享
顶(0)

2005/11/29 16:15:00

xiaozhu

美女呀，离线，快来找我吧！

  等级：大一新生
  文章：1
  积分：61
  门派：XML.ORG.CN
  注册：2005/11/3

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第2楼

可不可以让雨滴沿着规定好的路径运动形成雨

2005/11/29 16:57:00

帅哥哟，离线，有人找我吗？

  等级：大一(猛啃高等数学)
  文章：10
  积分：142
  门派：XML.ORG.CN
  注册：2005/9/19

姓名：(无权查看)
城市：(无权查看)
院校：(无权查看)

	第3楼

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

2005/12/6 19:09:00

GoogleAdSense

  等级：大一新生
  文章：1
  积分：50
  门派：无门无派
  院校：未填写
  注册：2007-01-01

	广告

2025/8/10 18:10:42

本主题贴数3，分页： [1]

管理选项：修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告


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