📄 0503-0300.htm
字号:
x="-5000" y="-10000" z="20000"/><BR>
</feSpecularLighting><BR>[4] <feComposite
in="specOut" in2="SourceAlpha" operator="in"
result="specOut"/><BR>[5] <feComposite in="SourceGraphic"
in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
result="litPaint"/><BR>[6] <feMerge><BR>
<feMergeNode in="offsetBlur"/><BR>
<feMergeNode in="litPaint"/><BR>
</feMerge><BR>
</filter><BR></defs><BR><BR><rect x="1" y="1"
width="198" height="118" style="fill:#888888;
stroke:blue"/><BR><g
style="filter:url(#MyFilter)"><BR>
<g><BR> <path style="fill:none; stroke:#D90000;
stroke-width:10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90
150,90 z" /><BR> <path style="fill:#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z"
/><BR> <g style="fill:#FFFFFF; stroke:black;
font-size:45; font-family:Verdana"><BR>
<text x="52" y="76">SVG</text><BR>
</g><BR>
</g><BR></g><BR></svg></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P align=left>其浏览效果是：</P>
<P align=center><IMG height=173
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-04.png" width=286></P>
<P
align=left>这个SVG描述的基本图形是蓝框灰色矩形，里面有一个红色环行跑道，再里面是一个红色圆头矩形，中间有“SVG”的白色文字。那么，它是如何通过一系列的过滤操作得到上面的效果呢？我们就来一步步看一看。</P>
<DIV align=center>
<CENTER>
<TABLE height=569 width="80%" border=1>
<TBODY>
<TR>
<TD align=middle width="82%" height=31><STRONG>步 骤</STRONG></TD>
<TD align=middle width=120 height=31><STRONG>效果</STRONG></TD></TR>
<TR>
<TD width="82%" height=70>
<P align=center>原始图形</P></TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-05.png" width=115></TD></TR>
<TR>
<TD width="82%"
height=70>[1]将原始图形进行alpha通道的钝化操作，钝化效果参数设为4，将钝化结果存在名为“blur”的缓冲中，作为后面[2]、[3]两步操作的输入。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-06.png" width=115></TD></TR>
<TR>
<TD width="82%"
height=70>[2]将[1]得到的效果向右下方向进行平移，将平移结果存在名为“offsetBlur”的缓冲中。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-07.png" width=115></TD></TR>
<TR>
<TD width="82%"
height=70>[3]对“blur”缓冲中的图形进行光照效果，描述了光源的位置和颜色，结果存在名为“specOut”的缓冲中。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-08.png" width=115></TD></TR>
<TR>
<TD width="82%"
height=70>[4]将[3]得到的效果和原始图形的alpha通道取交，保证其不超出原始图形的范围。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-09.png" width=115></TD></TR>
<TR>
<TD width="82%"
height=70>[5]将[4]得到的效果和原始图形重合，使原始图形显示一种光照效果，结果存在名为“litPaint”的缓冲中。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-10.png" width=115></TD></TR>
<TR>
<TD width="82%" height=70>[6]将[2]和[5]得到的效果融合，为图形加上阴影。</TD>
<TD align=middle width=120 height=70><IMG height=70
alt="TU000000-0503-0300-05.png (3356 bytes)"
src="image/TU000000-0503-0300-11.png"
width=115></TD></TR></TBODY></TABLE></CENTER></DIV>
<OL start=3>
<LI>
<P align=left><STRONG>SVG中对动画的支持</STRONG></P></LI></OL>
<P
align=left>目前，网页中播放的动画多为GIF格式，它也存在着与网上传输的图象格式相同的问题，即修改在服务器端实现，而不是在客户端实现。SVG中提供了专门的动画效果，可以描述一个图形图象元素的实时变化。</P>
<P
align=left>SVG中用标记<animateMotion>描述元素的移动效果，用<animateFlipbook>描述元素的弹跳效果，用<animateTransform>描述元素的放缩、旋转、偏斜等变换效果，用<animateColor>描述元素颜色的改变，还可以用<animate>描述元素的淡入淡出效果。</P>
<P align=left>下面这个例子描述了几种不同的动画效果：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml version="1.0"
standalone="no"?><BR><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
20000802//EN"
<BR>"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<P><svg width="8cm" height="3cm" viewBox="0 0 800
300"><BR><desc>Example anim01 - demonstrate animation
elements</desc><BR><BR><rect id="RectElement" x="300"
y="100" width="300" height="100" style="fill:rgb(255,255,0)"
><BR> <animate attributeName="x" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" /><BR>
<animate attributeName="y" attributeType="XML" begin="0s"
dur="9s" fill="freeze" from="100" to="0" /><BR> <animate
attributeName="width" attributeType="XML" begin="0s" dur="9s"
fill="freeze" from="300" to="800" /><BR> <animate
attributeName="height" attributeType="XML" begin="0s" dur="9s"
fill="freeze" from="100" to="300"
/><BR></rect><BR><BR><g transform="translate(100,100)"
><BR> <text id="TextElement" x="0" y="0"
style="font-family:Verdana; font-size:35.27; visibility:hidden" >
<BR> It s alive!<BR> <set
attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" /><BR>
<animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s"
fill="freeze" /><BR> <animateColor
attributeName="fill" attributeType="CSS" from="rgb(0,0,255)"
to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze"
/><BR> <animateTransform attributeName="transform"
attributeType="XML" type="rotate" from="-30" to="0" begin="3s"
dur="6s" fill="freeze" /><BR> <animateTransform
attributeName="transform" attributeType="XML" type="scale" from="1"
to="3" additive="sum" begin="3s" dur="6s" fill="freeze"
/><BR>
</text><BR></g><BR></svg></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P
align=left>代码首先描述了一个黄色矩形的淡出效果，分别指示了在9秒钟的过程中它的左上角坐标和长、宽的匀速变化。然后又描述了从第3秒开始显示的一串文字，这串文字在接下来的6秒钟里有以下动作：</P>
<UL>
<LI>文字的左上角沿直线运动
<LI>文字的颜色由兰色变成深红
<LI>文字的方向从上斜30度变为水平
<LI>文字的逐渐增大到原先的3倍大小 </LI></UL>
<P align=left>它在0秒、3秒、6秒、9秒的显示效果分别是：</P>
<P align=center><IMG height=91 alt="TU000000-0503-0300-12.png (260 bytes)"
src="image/TU000000-0503-0300-12.png" width=256></P>
<P align=center><IMG height=91
alt="TU000000-0503-0300-13.png (1094 bytes)"
src="image/TU000000-0503-0300-13.png" width=256></P>
<P align=center><IMG height=91
alt="TU000000-0503-0300-14.png (1962 bytes)"
src="image/TU000000-0503-0300-14.png" width=256></P>
<P align=center><IMG height=91
alt="TU000000-0503-0300-15.png (2134 bytes)"
src="image/TU000000-0503-0300-15.png" width=256></P>
<P
align=left><BR>尽管SVG规范尚未成为正式的推荐标准，但由于目前SVG代表了未来网上矢量图形传输发展的方向，国外各大公司都在追踪其发展，开发设计了一些实验系统，Adobe公司开发了用于IE5和Netscape的SVG浏览插件，IBM推出了专门的SVG浏览工具，许多知名的平面设计软件，例如CorelDraw、Illustrator,都开始尝试支持SVG格式的输入和输出，同时还出现了一大批格式转换工具，其中还包括从现在流行的Flash格式向SVG格式的转换工具。国内对于SVG的应用研究也已经逐步展开，例如图象图形编辑软件“方正画苑”已经在其3.0版本中加入了SVG的编辑输出功能，预计不久就将投入市场。鉴于SVG出色的优点，我们有理由相信，在不久的将来基于SVG技术的浏览技术必将成为Web技术上一个新的热点。<BR></P></DIV>
<P></P>
<P></P></TD></TR></TBODY></TABLE>
</center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -