posts - 40, comments - 13, trackbacks - 0, articles - 1
  IT博客 :: 首页 :: 新随笔 :: 联系 ::  :: 管理

(转贴)csdn上高手给出的svg例子(画饼图),求职应聘,必备良药
利用XSLT生成SVG格式的饼图

孟宪会  
2002-3-27 13:34:47

--------------------------------------------------------------------------------
 

上次介绍了如何利用XSLT来生成SVG格式的普通柱形图,这次我们介绍如何生成饼图。饼图也是数据统计时常用的表现方式之一。  
首先,我们准备所需要的数据,格式是XML的。由于目前许多大型数据库都提供了对XML查询结果的支持,因此,您可以直接利用数据库来生成XML数据文件,也可以经过查询,再用编写组件的方法来生成需要的XML数据文件。我们的XML数据文件Data.xml格式如下: 
 
<?xml version="1.0" encoding="UTF-16"?> 
<?xml-stylesheet type="text/xsl" href="PieSVGGraph.xsl"?> 
<总销售额> 
<月销售额 月数="1"> 
<产品销售额 产品编号="Mxh001" 销售数量="5" 销售额="1500.00"/> 
<产品销售额 产品编号="Mxh002" 销售数量="10" 销售额="500.00"/> 
<产品销售额 产品编号="Mxh003" 销售数量="1" 销售额="700.00"/> 
<产品销售额 产品编号="Mxh004" 销售数量="2" 销售额="1800.00"/> 
<产品销售额 产品编号="Mxh005" 销售数量="2" 销售额="1000.00"/> 
<产品销售额 产品编号="Mxh006" 销售数量="12" 销售额="1400.00"/> 
</月销售额> 
<月销售额 月数="2"> 
<产品销售额 产品编号="Mxh001" 销售数量="4" 销售额="1400.00"/> 
<产品销售额 产品编号="Mxh002" 销售数量="12" 销售额="2300.00"/> 
<产品销售额 产品编号="Mxh003" 销售数量="2" 销售额="1500.00"/> 
<产品销售额 产品编号="Mxh004" 销售数量="2" 销售额="1800.00"/> 
<产品销售额 产品编号="Mxh005" 销售数量="1" 销售额="1050.00"/> 
<产品销售额 产品编号="Mxh006" 销售数量="8" 销售额="1600.00"/> 
</月销售额> 
<!-- 限于篇幅所限,我们这里省略了3月份到12月份的数据,如果浏览时,请自行添加上,格式同前 --> 
</总销售额> 
 
下面,我们看看最关键的XSLT部分,由于在这里用到了XSLT,为了能够更好地看到本例的效果,请安装最新的 MsXML3.0+SP2或MsXML4.0,可以到微软的网站下载:http://www.microsoft.com/xml/。文中每一代码段都进行了注释说明。PieSVGGraph.xsl: 
 
<?xml version="1.0" encoding="UTF-16"?> 
<xsl:stylesheet version="1.0" exclude-result-prefixes="xsl Sin Cos" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
xmlns:Sin="http://lucky.myrice.com/Sin" 
xmlns:Cos="http://lucky.myrice.com/Cos"> 
 
<xsl:output method="xml" indent="yes" media-type="image/svg+xml"/> 
<!-- 先定义三角函数计算模板 --> 
<!-- 
========================================================================== 
计算sin(x)、cos(x)值的模板,用来返回三角函数sin(x)、cos(x)的值 
 
参数说明: 
$X - 输入的角度值,单位是弧度或角度,由下面的Unit参数确定。 
$Unit - [可选参数] 角度 $X 的单位,可选择的值如下: 
'角度' 代表$X的单位是角度; 
'弧度' 代表$X的单位是弧度(默认值)。 
$EPS - [可选参数] 计算结果的精度。增加小数位数可以更大的精确度,但会降低性能。 
========================================================================== --> 
<xsl:template name="sin"> 
<xsl:param name="X"/> 
<xsl:param name="Unit" select="'弧度'"/> 
<xsl:param name="EPS" select="0.00000001"/> 
<xsl:call-template name="FUNC_Cal"> 
<xsl:with-param name="Fun" select="$DOC/Sin:*[1]"/> 
<xsl:with-param name="X" select="$X"/> 
<xsl:with-param name="Unit" select="$Unit"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:call-template> 
</xsl:template> 
 
<xsl:template name="cos"> 
<xsl:param name="X"/> 
<xsl:param name="Unit" select="'弧度'"/> 
<xsl:param name="EPS" select="0.00000001"/> 
<xsl:call-template name="FUNC_Cal"> 
<xsl:with-param name="Fun" select="$DOC/Cos:*[1]"/> 
<xsl:with-param name="X" select="$X"/> 
<xsl:with-param name="Unit" select="$Unit"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:call-template> 
</xsl:template> 
 
 
<!-- 定义常量pi,代替π --> 
<xsl:variable name="pi" select="3.1415926535897932384626433832795"/> 
 
<!-- 下面我们利用sin(x)和cos(x)的展开式来近似计算他们的值。 --> 
<!-- 采用循环的办法是计算,循环结束的条件是前后两次的结果差值小于我们给定的精度。 --> 
<Sin:Sin/> 
<Cos:Cos/> 
<xsl:variable name="DOC" select="document('')/*"/> 
<xsl:template name="FUNC_Cal"> 
<xsl:param name="Fun" select="/.."/> 
<xsl:param name="X"/> 
<xsl:param name="Unit" select="'弧度'"/> 
<xsl:param name="EPS" select="0.00000001"/> 
<!-- 把角度转换成弧度 --> 
<xsl:variable name="Rads" select="(($Unit = '弧度') * $X) + ((not($Unit = '弧度')) * ($X * $pi div 180))"/> 
<!-- 应用相应的函数 --> 
<xsl:apply-templates select="$Fun"> 
<xsl:with-param name="X" select="$Rads"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:apply-templates> 
</xsl:template> 
 
<xsl:template name="Func_sin" match="Sin:*"> 
<xsl:param name="X"/> 
<xsl:param name="EPS" select="0.00000001"/> 
<xsl:variable name="Y"> 
<xsl:choose> 
<xsl:when test="not(0 <= $X and $pi*2 > $X)"> 
<xsl:call-template name="COSIN"> 
<xsl:with-param name="LEN" select="$pi*2"/> 
<xsl:with-param name="X" select="$X"/> 
</xsl:call-template> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="$X"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<xsl:call-template name="SINE"> 
<xsl:with-param name="X2" select="$Y*$Y"/> 
<xsl:with-param name="Result" select="$Y"/> 
<xsl:with-param name="Element" select="$Y"/> 
<xsl:with-param name="N" select="1"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:call-template> 
</xsl:template> 
 
<xsl:template name="SINE"> 
<xsl:param name="X2"/> 
<xsl:param name="Result"/> 
<xsl:param name="Element"/> 
<xsl:param name="N"/> 
<xsl:param name="EPS"/> 
<xsl:variable name="varN" select="$N+2"/> 
<xsl:variable name="varNewElement" select="-$Element*$X2 div ($varN*($varN - 1))"/> 
<xsl:variable name="varNewResult" select="$Result + $varNewElement"/> 
<xsl:variable name="varDiffResult" select="$varNewResult - $Result"/> 
<xsl:choose> 
<xsl:when test="$varDiffResult > $EPS or $varDiffResult < -$EPS"> 
<xsl:call-template name="SINE"> 
<xsl:with-param name="X2" select="$X2"/> 
<xsl:with-param name="Result" select="$varNewResult"/> 
<xsl:with-param name="Element" select="$varNewElement"/> 
<xsl:with-param name="N" select="$varN"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:call-template> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="$varNewResult"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:template> 
 
<xsl:template name="Func_cos" match="Cos:*"> 
<xsl:param name="X"/> 
<xsl:param name="EPS" select="0.00000001"/> 
<xsl:call-template name="Func_sin"> 
<xsl:with-param name="X" select="$pi div 2 - $X"/> 
<xsl:with-param name="EPS" select="$EPS"/> 
</xsl:call-template> 
</xsl:template> 
 
<xsl:template name="COSIN"> 
<xsl:param name="LEN"/> 
<xsl:param name="X"/> 
<xsl:variable name="SignX"> 
<xsl:choose> 
<xsl:when test="$X >= 0">1</xsl:when> 
<xsl:otherwise>-1</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<xsl:variable name="varDiff" select="$LEN*floor($X div $LEN) -$X"/> 
<xsl:choose> 
<xsl:when test="$varDiff*$X > 0"> 
<xsl:value-of select="$SignX*$varDiff"/> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="-$SignX*$varDiff"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:template> 
 
<!-- 定义饼图的大小 --> 
<xsl:param name="pie_RX" select="number(200)"/> 
<xsl:param name="pie_RY" select="$pie_RX"/> 
<xsl:param name="pie_explode_RX" select="number(20)"/> 
<xsl:param name="pie_explode_RY" select="$pie_explode_RX"/> 
<!-- 确定饼图的中心坐标点 --> 
<xsl:param name="pie_CX" select="$pie_RX + 150"/> 
<xsl:param name="pie_CY" select="$pie_RY + 50"/> 
<xsl:param name="pie_segment_explode" select="number(0)"/> 
<!-- 确定饼图中第一块圆弧的角度 --> 
<xsl:param name="pie_start_angle" select="number(0)"/> 
<!-- 定义最小显示的百分比数 --> 
<xsl:param name="Lowest_Must_Show" select="number(4)"/> 
<xsl:key name="kProdSales" match="产品销售额" use="@产品编号"/> 
 
<!-- 样式单模板开始定义 --> 
<xsl:template match="/"> 
<!-- 得到所有产品的列表 --> 
<xsl:variable name="ProdSales" select="总销售额/月销售额/产品销售额[generate-id() = generate-id(key('kProdSales',@产品编号))]"/> 
<!-- 得到所有产品的销售总值 --> 
<xsl:variable name="TotalSalesvalue" select="sum(总销售额/月销售额/产品销售额/@销售额)"/> 
<!-- SVG 图象开始 --> 
<svg id="body" viewBox="0 0 -100 {$pie_CY + $pie_RY + 75}"> 
<!-- 递归遍历所有产品 --> 
<xsl:call-template name="draw_segments"> 
<xsl:with-param name="Every_Prod_Sales" select="$ProdSales"/> 
<xsl:with-param name="total_sales" select="$TotalSalesvalue"/> 
</xsl:call-template> 
<!-- 饼图的标题 --> 
<text text-anchor="middle" stroke="#000099" font-size-adjust="+1" x="{$pie_CX - $pie_RX}" y="{$pie_CY + $pie_RY + 50}" dx="{2 * $pie_RX}"> 
X 公司个产品销售情况 
</text> 
</svg> 
</xsl:template> 
 
<!-- 递归模板,画出每一部分 --> 
<xsl:template name="draw_segments"> 
<xsl:param name="Every_Prod_Sales"/> 
<xsl:param name="total_sales"/> 
<!-- 递归调用时的参数 --> 
<xsl:param name="total_perc_so_far" select="number(0)"/> 
<xsl:param name="node_Num" select="number(1)"/> 
<!-- 产品节点数 --> 
<xsl:param name="drawn_Num" select="number(1)"/> 
<!-- 实际画出的数 --> 
<xsl:param name="Other_Perc" select="number(0)"/> 
<xsl:choose> 
<xsl:when test="$Every_Prod_Sales[$node_Num]"> 
<!-- 计算一种产品的总销售额 --> 
<xsl:variable name="this_prod_sales" select="sum(key('kProdSales',$Every_Prod_Sales[$node_Num]/@产品编号)/@销售额)"/> 
<!-- 计算该产品在总销售额中的百分比 --> 
<xsl:variable name="perc_of_total" select="$this_prod_sales div $total_sales"/> 
<!-- 实际画出的产品数:如果百分比小于设定的最小百分比,就忽略掉,放到其它一项中 --> 
<xsl:choose> 
<xsl:when test="$perc_of_total < ($Lowest_Must_Show div 100)"> 
<xsl:call-template name="draw_segments"> 
<xsl:with-param name="Every_Prod_Sales" select="$Every_Prod_Sales"/> 
<xsl:with-param name="total_sales" select="$total_sales"/> 
<xsl:with-param name="total_perc_so_far" select="$total_perc_so_far"/> 
<xsl:with-param name="node_Num" select="$node_Num + 1"/> 
<xsl:with-param name="drawn_Num" select="$drawn_Num"/> 
<xsl:with-param name="Other_Perc" select="$Other_Perc + $perc_of_total"/> 
</xsl:call-template> 
</xsl:when> 
<xsl:otherwise> 
<xsl:call-template name="draw_pie_part"> 
<xsl:with-param name="angle" select="360 * $perc_of_total"/> 
<xsl:with-param name="prev_angle" select="$pie_start_angle + (360 * $total_perc_so_far)"/> 
<xsl:with-param name="label" select="concat($Every_Prod_Sales[$node_Num]/@产品编号,' (',format-number($perc_of_total * 100,'0.0'),'%)')"/> 
<xsl:with-param name="explode" select="($pie_segment_explode = $drawn_Num) or ($pie_segment_explode = -1)"/> 
<xsl:with-param name="fill_color"> 
<xsl:call-template name="Pie_Color"> 
<xsl:with-param name="Rel_Pos" select="$drawn_Num"/> 
</xsl:call-template> 
</xsl:with-param> 
<xsl:with-param name="RX" select="$pie_RX"/> 
<xsl:with-param name="radiusY" select="$pie_RY"/> 
<xsl:with-param name="centerX" select="$pie_CX"/> 
<xsl:with-param name="centerY" select="$pie_CY"/> 
<xsl:with-param name="explode_RX" select="$pie_explode_RX"/> 
<xsl:with-param name="explode_radiusY" select="$pie_explode_RY"/> 
</xsl:call-template> 
<!-- 统计下一个节点 --> 
<xsl:call-template name="draw_segments"> 
<xsl:with-param name="Every_Prod_Sales" select="$Every_Prod_Sales"/> 
<xsl:with-param name="total_sales" select="$total_sales"/> 
<xsl:with-param name="total_perc_so_far" select="$total_perc_so_far + $perc_of_total"/> 
<xsl:with-param name="node_Num" select="$node_Num + 1"/> 
<xsl:with-param name="drawn_Num" select="$drawn_Num + 1"/> 
<xsl:with-param name="Other_Perc" select="$Other_Perc"/> 
</xsl:call-template> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:when> 
<xsl:when test="$Other_Perc > 0"> 
<xsl:call-template name="draw_pie_part"> 
<xsl:with-param name="angle" select="360 * $Other_Perc"/> 
<xsl:with-param name="prev_angle" select="$pie_start_angle + (360 * $total_perc_so_far)"/> 
<xsl:with-param name="label" select="concat('其它 (',format-number($Other_Perc * 100,'0.0'),'%)')"/> 
<xsl:with-param name="explode" select="($pie_segment_explode < 0)"/> 
<xsl:with-param name="fill_color"> 
<xsl:call-template name="Pie_Color"> 
<xsl:with-param name="Rel_Pos" select="$drawn_Num"/> 
</xsl:call-template> 
</xsl:with-param> 
<xsl:with-param name="RX" select="$pie_RX"/> 
<xsl:with-param name="radiusY" select="$pie_RY"/> 
<xsl:with-param name="centerX" select="$pie_CX"/> 
<xsl:with-param name="centerY" select="$pie_CY"/> 
<xsl:with-param name="explode_RX" select="$pie_explode_RX"/> 
<xsl:with-param name="explode_radiusY" select="$pie_explode_RY"/> 
</xsl:call-template> 
</xsl:when> 
</xsl:choose> 
</xsl:template> 
 
<!-- 画出每一块单独的弧 --> 
<xsl:template name="draw_pie_part"> 
<xsl:param name="angle"/> 
<xsl:param name="prev_angle"/> 
<xsl:param name="label"/> 
<xsl:param name="explode" select="false()"/> 
<xsl:param name="fill_color" select="'#000099'"/> 
<xsl:param name="line_color" select="'#000000'"/> 
<xsl:param name="RX" select="number(200)"/> 
<xsl:param name="radiusY" select="number(200)"/> 
<xsl:param name="centerX" select="$RX + 50"/> 
<xsl:param name="centerY" select="$radiusY + 50"/> 
<xsl:param name="explode_RX" select="number(20)"/> 
<xsl:param name="explode_radiusY" select="number(20)"/> 
<!-- 计算一种产品占的角度 --> 
<xsl:variable name="full_angle" select="$prev_angle + $angle"/> 
<!-- 计算图例文字所在的角度位置 --> 
<xsl:variable name="half_angle" select="$prev_angle + ($angle div 2)"/> 
<xsl:variable name="X0"> 
<xsl:choose> 
<xsl:when test="$explode"> 
<xsl:variable name="sinX"> 
<xsl:call-template name="sin"> 
<xsl:with-param name="X" select="$half_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="$centerX + ($sinX * $explode_RX)"/> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="$centerX"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<xsl:variable name="Y0"> 
<xsl:choose> 
<xsl:when test="$explode"> 
<xsl:variable name="cosX"> 
<xsl:call-template name="cos"> 
<xsl:with-param name="X" select="$half_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="$centerY + (0 - ($cosX * $explode_radiusY))"/> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="$centerY"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<!-- 计算坐标点 --> 
<xsl:variable name="X1"> 
<xsl:variable name="sinX"> 
<xsl:call-template name="sin"> 
<xsl:with-param name="X" select="$prev_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="($sinX * $RX)"/> 
</xsl:variable> 
<xsl:variable name="Y1"> 
<xsl:variable name="cosX"> 
<xsl:call-template name="cos"> 
<xsl:with-param name="X" select="$prev_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="0 - ($cosX * $radiusY)"/> 
</xsl:variable> 
<xsl:variable name="X2"> 
<xsl:variable name="sinX"> 
<xsl:call-template name="sin"> 
<xsl:with-param name="X" select="$full_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="($sinX * $RX) - $X1"/> 
</xsl:variable> 
<xsl:variable name="Y2"> 
<xsl:variable name="cosX"> 
<xsl:call-template name="cos"> 
<xsl:with-param name="X" select="$full_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="(0 - ($cosX * $radiusY)) - $Y1"/> 
</xsl:variable> 
<!-- 计算图例出现的象限位置,决定图例文字出现的位置 --> 
<xsl:variable name="label_quandrant" select="floor(($half_angle mod 360) div 90)"/> 
<xsl:variable name="textXalign"> 
<xsl:choose> 
<xsl:when test="$label_quandrant < 2"> 
<xsl:text>start</xsl:text> 
</xsl:when> 
<xsl:otherwise> 
<xsl:text>end</xsl:text> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<xsl:variable name="textDY"> 
<xsl:choose> 
<xsl:when test="($label_quandrant = 0) or ($label_quandrant = 3)"> 
<xsl:text>-10</xsl:text> 
</xsl:when> 
<xsl:otherwise> 
<xsl:text>15</xsl:text> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<!-- 计算图例文字的x、y坐标 --> 
<xsl:variable name="XTxt"> 
<xsl:variable name="sinX"> 
<xsl:call-template name="sin"> 
<xsl:with-param name="X" select="$half_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="$X0 + ($sinX * ($RX + 10))"/> 
</xsl:variable> 
<xsl:variable name="YTxt"> 
<xsl:variable name="cosX"> 
<xsl:call-template name="cos"> 
<xsl:with-param name="X" select="$half_angle"/> 
<xsl:with-param name="Unit" select="'角度'"/> 
</xsl:call-template> 
</xsl:variable> 
<xsl:value-of select="$Y0 + (0 - ($cosX * $radiusY))"/> 
</xsl:variable> 
<!-- 画出每个产品所占的部分 --> 
<g> 
<!-- 画出图 --> 
<path fill="{$fill_color}" stroke="{$line_color}" d="M{$X0},{$Y0} l{$X1},{$Y1} a{$RX},{$radiusY} 0 0 1 {$X2},{$Y2} L{$X0},{$Y0}"/> 
<!-- 画出旁边的图例文字 --> 
<text text-anchor="{$textXalign}" x="{$XTxt}" y="{$YTxt}" dy="{$textDY}"> 
<xsl:value-of select="$label"/> 
</text> 
</g> 
</xsl:template> 
 
<!-- 计算饼图每部分的颜色 --> 
<xsl:template name="Pie_Color"> 
<xsl:param name="Rel_Pos" select="number(0)"/> 
<xsl:variable name="ColorLight" select="'F0E0A09070503010E0C0A08060402000'"/> 
<xsl:text>#</xsl:text> 
<xsl:choose> 
<xsl:when test="($Rel_Pos mod 3) = 0">EE</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="substring($ColorLight,(($Rel_Pos mod 16) * 2)+1,2)"/> 
</xsl:otherwise> 
</xsl:choose> 
<xsl:choose> 
<xsl:when test="($Rel_Pos mod 3) = 1">EE</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="substring($ColorLight,(($Rel_Pos mod 16) * 2)+1,2)"/> 
</xsl:otherwise> 
</xsl:choose> 
<xsl:choose> 
<xsl:when test="($Rel_Pos mod 3) = 2">EE</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="substring($ColorLight,(($Rel_Pos mod 16) * 2)+1,2)"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:template> 
 
</xsl:stylesheet> 
 
我们最后生成的SVG图象如下图所示。 
 
 


此主题相关图片如下:

posted @ 2005-12-29 17:28 WJH 阅读(1901) | 评论 (1)编辑 收藏

今发生一盗窃事件,一男一女2小偷(长的象阿拉伯人,估计是新疆人),见一女子开电动车快启动时,男贼放哨,女贼开始掏开车女子的外衣口袋里的东西,车子开动走了,女贼边跟其后边跑边掏,跟其后跑近10米之远,直到东西到手......,将近年末,各位出门一定要注意自己的东西,尤其是自己的包包和外套口袋里东西,不要给这些LJ有机可乘!

posted @ 2005-12-25 22:24 WJH 阅读(119) | 评论 (0)编辑 收藏

今天五星开业,去购物了,拿了好多赠品!累啊!看来以后还是得搞活动的时候去买东西啊!

posted @ 2005-12-24 22:12 WJH 阅读(79) | 评论 (0)编辑 收藏

JavaScript对象与数组参考大全

本文列举了各种JavaScript对象与数组,同时包括对上述每一对象或数组所完成工作的简短描述,以及与其相关的属性方法,以及事件处理程序,还注明了该对象或数组的父对象用户同样可能需要参考Online Companion中的超级文本Object Hierarchy页面(http://www.netscapepress.com/support/javascript/10-9.htm),以便了解这些对象之间是如何相互关联的。
  顺便提一下,记住,这里把所有作为另一对象的子对象的对象看作该对象的属性请参见第十章中与此相关的注解。

  B.1 anchor对象
  使用<A NAME=>标记创建的HTML描点能被一个链接作为目标如果锚点包括HREF=特性,则它也是一个链接对象。
  anchor对象是document对象的一个属性,它本身没有属性方法或者事件处理程序。

  B.2 anchors数组
  anchors数组是document对象的一个属性,是文档内所有anchor对象的一个列表如果anchor也是一个link(链接),则它会同时出现在anchors和links数组中。
  属性
  length 文档内的锚点个数

  B.3 array对象
  array对象是Netscape Navlgator 3.0 beta 3中引入的一个新的对象,因而,它不能在Netscape 2.0中使用它是一个内置对象,而不是其它对象的属性。
  属性
 length 数组中的值个数

  B.4 button对象
  它是form对象的一个属性,使用<INPUT TYPE="BUTTON">标记来创建。
  属性
  name HTML标记中的NAME=特性
  value HTML标记中的VALUE=特性
  方法
  click 模拟鼠标单击一按钮
  事件处理程序
  Onclick

  B.5 checkbox 对象
  它是form对象的一个属性,使用<INPUT TYPE="CHECKBOX">标记来创建。
  属性
  checked 复选框的选择状态
  defaultChecked 标记的CHECKED=特性
  name 标记的NAME=特性
  value 标记的VALUE=特性
  方法
  click 模拟鼠标单击按钮
  事件处理程序
  onclick

  B.6 Date对象
  它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程。
   方法
  getDate() 查看Date对象并返回日期
  getDay() 返回星期几
  getHours() 返回小时数
  getMinutes() 返回分钟数
  getMonth() 返回月份值
  getSeconds() 返回秒数
  getTime() 返回完整的时间
  getTimezoneoffset() 返回时区偏差值(格林威治平均时间与运行脚本的计算机所处时区设置之间相差的小时数)
  getYear() 返回年份
  parse() 返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数(Date对象按照毫秒数的形式存储从那时起的日期和时间)但是注意,该方法当前不能正确运行
  setDate() 改变Date对象的日期
  setHours() 改变小时数
  setMinutes() 改变分钟数
  setMonth() 改变月份
  setSeconds() 改变秒数
  setTime() 改变完整的时间
  setYear() 改变年份
  toGMTString() 把Date对象的日期(一个数值)转变成一个GMT时间字符串,返回类似下面的值:Weds,15 June l997 14:02:02 GMT(精确的格式依赖于计算机上所运行的操作系统而变)
  toLocaleString() 把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式
  UTC() 使用Date UTC(年、月、日、时、分、秒),以自从1970年1月1日00:00:00(其中时、分、秒是可选的)以来的毫秒数的形式返回日期

  B.7 document对象
  该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
  属性
  alinkColor 活动链接的颜色(ALINK)
  anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
  anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
  bgColor 文档的背景颜色(BGCOLOR)
  cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
  fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
  form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
  forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
  lastModified 文档最后的修改日期
  linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
  link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
  links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
  location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
  referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
  title 文档的标题((TITLE>)
  vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
  方法
  clear 清除指定文档的内容
  close 关闭文档流
  open 打开文档流
  write 把文本写入文档
  writeln 把文本写入文档,并以换行符结尾

  B.8 elements数组
  它是form对象的一个属性,列举了窗体内各元素的一个数组。
  属性
  1ength 窗体内的元素个数
  B.9 form对象
  它是document对象的一个属性,文档内的一个窗体。
  属性
  action 包含了为一个窗体提交的目标URL的字符串
  button 窗体内的一个按钮,使用<INPUT TYPE=”BUTTON”>标记来创建(该属性本身也是一个对象)
  checkbox 复选框,使用<INPUT TYPE=”CHECKBOX”>标记来创建 (该属性本身也是一个对象)
  elements array 一个数组,按照其出现于窗体内的顺序列举各窗体元素(该属性本身也是一个对象)
  encoding 窗体的MIME编码
   hidden 窗体里的一个隐藏元素(<INPUT TYPE=”HIDDEN”>)。窗体对象的一个属性(该属性本身也是一个对象)
  length 窗体里的元素的个数
  method 输入窗体的数据传送到服务器上的方式,即(FORM)标记中的METHOD特性
  radio 设置在窗体里的单选按钮(<INPUT TYPE=”RADIO”>)(该属性本身也是一个对象)
  reset 窗体里的复位按钮((1NPUT TYPE=”RESET”>)(该属性自身也是一个对象)
  select 窗体里的选择框(<SELECT>)(该属性本身也是一个对象)
  submit 窗体里的提交按钮(<INPUT TYPE=”SUBMIT”>)(该属性本身也是一个对象)
  target 提交窗体后,显示回应信息的窗口的名字
  text 窗体里的文本元素(<INPUT TYPE=”TEXT”>)(该属性本身也是一个对象)
  textarta 窗体里的文本区元素(<TEXTAREA>)(该属性本身也是一个对象)
  方法
  submit 提交窗体(与使用Submit按钮的作用相同)事件处理程序
  onsubmit

  B.10 forms数组
  该数组是document对象的一个属性,即列举了文档内的各窗体的一个数组。
  属性
  length 文档内窗体的个数

  B.11 frame对象
  它是window对象的一个属性,窗口内的一个框架。除了个别例外,frame对象与window对象的作用相同。
  属性
  frames array 列举该框架内的各个子框架的一个数组(该属性本身也是—个对象)
  length 该框架内的框架数
  name 框架的名字(<FRAME>标记里的NAME特性)
  parent 包含本框架的父窗口的同义词
  self 当前框架的同义词
  window 当前框架的同义词
  方法
  clearTimeout() 用来终止setTimeout方法的工作
  setTimeout() 等待指定的毫秒数,然后运行指令

  B.12 frames数组
  它既是window对象,也是frame对象的属性,列举了window或者frame对象内的各框架。
  属性
  length 窗口或框架对象内的框架数

  B.13 hidden对象
  糊为form对象的一个属性,窗体内的一个隐藏元素(<INPUT TYPE=”HIDDEN”>)。
  属性
  name 标记内的名字(NAME特性)
  value 标记内的VALUE=特性

  B.14 history对象
  它为window对象的一个属性,该窗口的历史列表。
  属性
  length 历史列表中的项目数
  方法
  back 加载历史列表中的上一个文档
  forward 加载历史列表中的下一个文档
  go 加载历史列表中的一个指定文档,通过文档在列表中的位置来指定

  B.15 image对象
  它是document对象的一个属性,是使用(1MG)标记内嵌入文档里的一幅图像这是Netscape Navigator 3.0 beta 3引入的新对象。
  属性
  border <IMG>标记的BORDER特性
  complete 表示浏览器是否完整地加载了图像的一个布尔值
  height HEIGHT特性
  hspace HSPACE特性
  lowsrc LOWSRC特性
  src SRC特性
  vsPace VSPACE特性
  width WIDTH特性
  事件处理程序
  Onload 图象载入
  Onerror 载入错误
  Onabort 取消

  B.16 images数组
  它是document对象的一个属性,文档中所有图像的列表。
  属性
  length 文档内的图像个数

  B.17 link
  它是document对象的一个属性,文档内的一个<A HREF=>标记。
  属性
  hash 以散列号(#)开始的一个字符串,用于指定URL内的一个锚点
  host 包括冒号和端口号的URL的主机名部分
  hostname 与host属性相同,除了不包括冒号和端口号外
  href 完整的URL
  pathname URL的目录路径部分
  port URL的:端口部分
  protocol URL类型(http:、ftp:、gopher:等等)
  search 以一个问号开始的URL中的一部分,用于指定搜索信息
  target 当用户单击一链接(TARGET特性)时,用于显示被引用文档内容的窗口
  事件处理程序
  Onclick 点击
  Onmouseover 鼠标移到对象上

  B.18 links数组
  它是document对象的一个属性,文档内所有链接的一个列表。
  属性
  length 文档内的链接数

  B.19 location对象
  它为document对象的一个属性,该文档的完整URL,请不要把它与window.location属性相混淆,后者可用来加载一个新文档,并且window.location属性本身并不是一个对象,同时,window.location可以用脚本修改,而document.location则不能。
  属性
  hash 以散列号(#)开始的一个字符串,用于指定URL内的一个锚点
  host 包括冒号和端口号的URL的主机名部分
  hostname 与host属性相同,除了不包括冒号和端口号之外
  href 完整的URL
  pathname URL的目录路径部分
  port URL的:端口部分
  protocol URL的类型(http:、ftp:、gopher:等等)
  search 以问号(?)开始的URL中的一部分,用于指定搜索信息
  target 用户单击链接(TARGET特性)时,用于显示被引用文档的内容的窗口

  B.20 math对象
  该对象不是其它对象的一个属性,而是一个内置对象,包含了许多数学常量和函数。
  属性
  E 欧拉常量,自然对数的底(约等于2.718)
  LN2 2的自然对数(约等于0.693)
  LN10 10的自然对数(约等于2.302)
  LOG2E 以2为底的e的对数(约等于1.442)
  LOG10E 以10为底的e的对数(约等于o.434)
  PI ∏的值(约等于3.14159)
  SQRT1_2 0.5的平方根(即l除以2的平方根,约等于o.707)
  SQRT2 2的平方根(约等于1.414)
  方法
  abs() 返回某数的绝对值(即该数与o的距离,例如,2与一2的绝对值都是2)
  acos() 返回某数的反余弦值(以弧度为单位)
  asin() 返回某数的反正弦值(以弧度为单位)
  atan() 返回某数的反正切值(以弧度为单位)
  ceil() 返回与某数相等,或大于该数的最小整数(ceil(-22.22)返回-22;ceil22,22)返回23;ceil(22)返回22)
  cos() 返回某数(以弧度为单位)的余弦值
  exp() 返回en
  floor() 与ceil相反(floor(一22.22)返回一23;floor(22.22)返回22; floor(22)返回22)
  10g() 返回某数的自然对数(以e为底)
  max() 返回两数间的较大值
  min() 返回两数问的较小值
  pow() 返回m的n次方(其中,m为底,n为指数)
  random() 返回0和1之间的一个伪随机数(该方法仅在Netscape
  Navigator的UNIX版本中有效)
  round() 返回某数四舍五入之后的整数
  sin() 返回某数(以弧度为单位)的正弦值
  sqrt() 返回某数的平方根
  tan() 返回某数的正切值

  B.2l navigator对象
  该对象不是其它对象的属性,而是一个内置对象它包含了有关加载文档的浏览器的信息。
  属性
  appCodeName 浏览器的代码名(例如,Mozilla)
  appName 浏览器的名字
  appVersion 浏览器的版本号
  userAgent 由客户机送到服务器的用户与代理头标文本
  方法
  javaEnabled JavaScript中当前并没有该方法,但是不久之后将会添加上它将查看浏览器是否为兼容JavaScript的浏览器,如果是,继续查看JavaScript是否处于支持状态。

  B.22 options数组
  该数组是select对象的一个属性,即选择框中的所有选项(<OPTION>)的一个列表。
  属性
  defaultSelected 选项列表中的缺省选项
  index 选项列表中某选项的索引位置
  length 选项列表中的选项数(<OPTIONS>)
  name 选项列表的名字(NAME特性)
  selected 表示选项列表中某选项<OPTION>是否被选中的一个布尔类型值
  selectedIndex 选项列表中已选中的<OPTION>的索引(位置)
  text 选项列表中<OPTION>标记后的文本
  value 选项列表中的VALUE=特性

  B.23 Password 对象
  它是document对象的一个属性,一个<INPUT TYPE=”PASSWORD”>标记。
  属性
  defaultValue password对象的缺省值(VAlUE=特性)
  name 对象的名字(NAME=特性)
  value 该域具有的当前值最初与VALUE=特性(defauttValue)相同,但是,如果脚本修改了该域中的值,则该值将改变
  方法
  focus 把焦点从该域移开
  blur 把焦点移到该域
  select 选择输入区域

  B.24 radio对象
  它是form对象的一个属性,窗体内的一组单选按钮(选项按钮)(<INPUT TYPE=”RADIO”>)。
  属性
  checked 复选框或选项按钮(单选按钮)的状态
  defaultChecked 复选框或选项按钮(单选按钮)的缺省状态
  length 一组单选按钮中的按钮数
  name 对象的名字(NAME=特性)
  value VALUE=特性
  方法
  click 模拟鼠标单击按钮
  事件处理程序
  onclick 点击

  B.25 reset 对象
  它是form对象的一个属性,复位按钮(<INPUT TYPE=”RESET”>)。
  属性
  name 对象的名字(NAME=特性)
  value VALUE=特性
  方法
  click 模拟鼠标单击按钮
  事件处理程序
  onclick 点击

  B.26 select对象
  它是form对象的一个属性,选择框(<SELECT>)。
  属性
  length 选项列表中的选项数(<OPTIONS>)
  name 选项列表的名字(NAME特性)
  options 列表中的选项数
  selectedlndex 选项列表中已选中的<OPTION>的索引(位置)
  text 选项列表中(OPTION)标记之后的文本
  value 选项列表中的VALUE=特性
  方法
  blur 把焦点从选项列表中移走(失去焦点时)
  focus 把焦点移到选项列表中(得到焦点时)
  事件处理程序
  Onblur 失去焦点时事件
  onchange 更改
  Onfocus 聚焦事件

  B.27 string对象
  它不是另一个对象的属性,而是一个内置对象,即一串字符字符串输入脚本中时必须位于引号内。
  属性
  length 字符串中的字符个数
  方法
  anchor() 用来把字符串转换到HTML锚点标记内(<A NAME=>)
  big() 把字符串中的文本变成大字体(<BIG>)
  blink() 把字符串中的文本变成闪烁字体(<BLINK>)
  bold() 把字符串中的文本变成黑字体(<B>)
  charAt() 寻找字符串中指定位置的一个字符
  fixed() 把字符串中的文本变成固定间距字体(<TT>)
  fontcolor() 改变字符串中文本的颜色(<FONT COLOR=>)
  fontsize() 把字符串中的文本变成指定大小(<FONTSIZE=>)
  indexOf() 用来搜索字符串中的某个特殊字符,并返回该字符的索引位置
  italics() 把字符串中的文本变成斜字体(<I>)
  lastlndexOf() 与indexof相似,但是向后搜索最后一个出现的字符
  link() 用来把字符串转换到HTML链接标记中(<A HREF=>)
  small() 把字符串中的文本变成小字体(<SMALL>)
  strike() 把字符串中的文本变成划掉字体(<STRIKE>)
  sub() 把字符串中的文本变成下标(subscript)字体((SUB>)
  substring() 返回字符串里指定位置间的一部分字符串
  sup() 把字符串中的文本变成上标(superscript)字体(<SUP>)
  toLowerCase() 把字符串中的文本变成小写
  toUpperCase() 把字符串中的文本变成大写

  B.28 submit对象
  它是form对象的一个属性,窗体中的一个提交按钮(<INPUT TYPE=”SUBMIT”>)。
  属性
  name 对象的名字(NAME=特性)
  value VALUE=特性
  方法
  click 模拟鼠标单击按钮
  事件处理程序
  Onclick 点击

  B.29 text对象
  它是form对象的一个属性,宙体中的一个文本域(<INPUT TYPE=”TEXT”>)。
  属性
  defaultValue text对象的缺省值(VALUE=特性)
  name 该对象的名字(NAME=特性)
  Value 该域具有的当前值,最初与VALUE=特性(defaultValue)相同但是,如果脚本修改了该域中的值,则该值将改变
  方法
  blur 把焦点从文本框移开
  focus 把焦点移到文本框
  select 选择输入区域
  事件处理程序
  Onblur 失去焦点事件
  Onchange 更改
  Onfocus 聚焦事件
  Onselect 选取事件

  B.30 textarea对象
  它是form对象的一个属性,宙体中的一个文本区域(<TEXTAREA>)。
  属性
  defaultValue textarea对象的缺省值(VALUE=特性)
  name 该对象的名字(NAME=特性)
  value 该域具有的当前值,最初与VALUE=特性(defaultValue)相同,但是,如果脚本修改了该域中的值,则该值将改变了。
  方法
  blur 把焦点从文本区移开
  focus 把焦点移到文本区
  select 选择输入区域事件处理程序
  事件处理程序
  Onblur 失去焦点事件
  Onchange 更改
  Onfocus 聚焦事件
  Onselect 选取事件

  B.31 window对象
  它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
  属性
  defaultStatus 缺省的状态条消息
  document 当前显示的文档(该属性本身也是一个对象)
  frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
  frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
  history 窗口的历史列表(该属性本身也是一个对象)
  length 窗口内的框架数
  location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
  name 窗口打开时,赋予该窗口的名字
  opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
  parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
  self 当前窗口或框架的同义词
  status 状态条中的消息
  top 包含当前框架的最顶层浏览器窗口的同义词
  window 当前窗口或框架的同义词,与self相同
  方法
  alert() 打开一个Alert消息框
  clearTimeout() 用来终止setTimeout方法的工作
  close() 关闭窗口
  confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
  blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
  focus() 把指定的窗口带到前台(另一个新方法)
  open() 打开一个新窗口
  prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
  setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序
  事件处理程序
  Onload() 页面载入时触发
  Onunload() 页面关闭时触发

posted @ 2005-12-23 22:29 WJH 阅读(142) | 评论 (0)编辑 收藏

ASP下载特区      http://www.asp300.com
ASP酷技术网:     http://www.aspcool.com  
ASP/ASP.net太平洋学院:   http://www.pconline.com.cn/pcedu/empolder/wz/asp/index.html
ASP动网先锋:     http://www.aspsky.net
中国DotNet俱乐部:  http://www.chinaspx.com
DOTNET中华网:    http://www.aspxcn.com
asp讨论板        http://asptalk.dhs.org
ASP动感新网      http://www.booro.com
LEARNASP(EN)   http://www.learnasp.com
asp新生代        http://www.editasp.com
网人俱乐部       http://www.wrclub.net
中国BS网       http://www.chinabs.net
donet中文资源网  http://www.cndotnet.net
ASP源代码网站    http://www.asp100.net
ASP中文网站      http://www.2yup.com/asp
ASP自由程序网    http://www.xfxd.com/babycrazy
ASP精品站        http://www.asp999.com
简单ASP          http://loos.126.com
A S P - 空间     http://asproom.x168.net/ql
ASP中文网站      http://www.2yup.com/asp"
ASP百分百源代码  http://www.asp100.net   
源码之家         http://www.mycodes.net
asp小站          http://yanhang00.yeah.net
学生网ASP频道    http://www.6to23.com/s11
天极网-ASP.NET专题   http://www.yesky.com/20020806/1623844.shtml
天新网           http://www.21tx.com
厚街在线         http://www.dldldl.com
西部联盟         http://www.xbasp.net
Asp教程目录      http://chinese.pku.edu.cn/netstudy/aspteach/index.asp
赛迪网源码下载   http://www.ccidnet.com/tech/msrc
互动时代         http://www.hoodle.net
.net学习         http://www.3bull.com
阿江             http://www.ajiang.net
红玫瑰教程站电脑操作教程     http://netschool.ayinfo.ha.cn/aspphp.htm
ASP/JSP技术网    http://www.aspjsp.net
好易asp下载      http://asp.weboke.com
动网巴士         http://aspbus.6to23.com
科技园           http://www.tomda.com.cn
ASP论坛          http://www.dvbbs.net
ASP教育在线      http://www.aspedu.com
ASP论坛          http://www.leadbbs.com
搜狐ASP网址集    http://www.hao123.com/fra/homepage/sohuasp.htm
中文雅虎ASP网址集    http://www.hao123.com/fra/homepage/yahooasp.htm
新浪ASP网址集    http://www.hao123.com/fra/homepage/sinaasp.htm
新浪ASP网址集(个人)  http://www.hao123.com/fra/homepage/sinaaspper.htm


posted @ 2005-12-21 21:29 WJH 阅读(283) | 评论 (1)编辑 收藏

祝天下有情人,圣诞快乐!t_Untitled-1.jpg

posted @ 2005-12-21 20:24 WJH 阅读(91) | 评论 (0)编辑 收藏


 SVG中的声音关联
源代码: 
 
<?xml version="1.0" encoding="utf-8"?>

<svg xmlns:a="http://www.adobe.com/svg10-extensions" a:timeline="independent" width="100" height="50">

<a:audio xlink:href="love.mp3" begin="0s" />

<text x="50" y="20" style="fill: red; text-anchor: middle">
MP3+SVG=COOL
</text>

</svg>
 
 
 
讲解: 
 
SVG支持外部音乐文件的关联,通过SVG插件播放(建议使用adobe svg插件2.0 beta版).音乐文件格式可以是wav也可以是mp3.

绿色部分是声明部分.xmlns是xml的名字空间.(很奇怪,如果不用http://www.adobe.com/svg10-extentions作为名字空间,音乐无法正常播放,其原因还不明确--蓝骑士注).a:timeline声明时间线的长度,这里为不确定值independent.

红色部分是链接属性,播放音乐一定要使用a:audio标签.xlink:href指明链接地址,可以是绝对路径也可以是相对路径.begin表示音乐从哪个时间开始播放.可以自定义数值.

这里的mp3长度为90多k

posted @ 2005-12-19 21:40 WJH 阅读(198) | 评论 (0)编辑 收藏

 SVG中的动画技术(2)
SVG中的动画技术(2) 
下面再看一个沿指定路径运动的例子:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
"
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" viewBox="0 0 500 300"
xmlns="
http://www.w3.org/2000/svg">
<desc>沿路径运动的例子</desc>
<defs>
<!-- 下面定义渐变颜色 -->
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpace">
<stop offset="0%" style="stop-color: #88f;"/>
<stop offset="100%" style="stop-color: #008;"/>
</linearGradient>
</defs>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />

<!-- 下面的代码画出一个路径 -->
<path d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="8" />

<!-- 下面的这个圆将沿着定义的轨迹运动 -->
<circle r="25" style="fill:url(#grad1)">
<!-- 定义动画的运动轨迹 -->
<animateMotion dur="6s" repeatCount="indefinite"
path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
</circle>
<text x="145" y="285" style="font-size:12pt">
http://lucky.myrice.com</text>
</svg>

    上面的例子应用了animateMotion动画元素,其属性设定和前面类似。该例子的效果如图所示: 


    SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的,在SVG中使用脚本语言和HTML中类似,首先是指定脚本的语言类型:有两种办法可以指定脚本的语言类型

1),在SVG元素里使用contentScriptType属性,可以指定整个文档里使用的缺省脚本语言类型。 
语法如下:
<svg contentScripttype="content-type">
content-type指定一种媒体类型,默认是"text/ecmascript"
2),在script元素里使用type属性来声明该段脚本所使用的语言类型。
语法如下:
<script type="content-type">
content-type就是所使用的媒体类型。 

    SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里,也可以通过xlink:href属性,指定一个脚本文件的URL地址,比如:<script type="text/javascript" xlink:href="test.js"></script>

posted @ 2005-12-16 18:59 WJH 阅读(257) | 评论 (0)编辑 收藏

 
 SVG中的动画技术
SVG中的动画技术

 

  
动画技术是互联网中不可缺少的一个重要组成部分,是吸引访问者的重要手段之一,SVG也同样有能力随时改变矢量图象外在表现的能力。SVG中生成动画的方式有: 

1)利用SVG提供的动画元素实现:由于SVG的内容可以定义成动态变化的,因此,利用SVG提供的各种动画元素,我们就可以得到各种动画效果,比如:沿某路径运动、渐隐渐现、旋转、缩放、改变颜色等。 

2)使用SVG DOM:由于SVG DOM遵循DOM1、DOM2规范的大部分内容,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。 

SVG的动画元素标准的指定者与SYMM(Synchronized Multimedia)工作组合作,共同编写了SMIL动画规范,这个规范描绘了XML文档结构中使用的通用的动画特征集。SVG不但实现了SMIL的动画规范,同时也提供了一些SVG的特殊扩展。SVG定义了比SMIL动画更为严格的错误处理程序,当文档中有任何错误产生时,动画都将会停止。 

SVG支持SMIL(Synchronized Multimedia Integration Language)动画规范中定义的下面的动画元素: 

animate:改变SVG元素数值属性的不同值 

set:是animate的简化,主要用来改变非数值属性的属性值,比如visibility属性等 

animateMotion:沿某运动路线移动SVG元素 

animateColor:改变某些元素的颜色属性值 

SVG对SMIL动画的扩展元素和属性有: 

animateTransform:改变SVG转换的转换属性值 

path属性:改变animateMotion元素中path属性的所有特性。 

mpath元素:SVG允许animateMotion元素包含mpath子元素,它能够引用SVG中path元素的路径定义 

rotate属性:SVG为animateMotion增加一个rotate属性,用来控制一个对象是否自动进行旋转。 

下面通过一个简单的例子,来看一看SVG是如何实现动画效果的: 

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"  

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 

<svg width="500" height="400" 

xmlns="http://www.w3.org/2000/svg"> 

<desc>本例子说明SVG的动画元素</desc> 

<defs> 

<!-- 下面定义渐变效果 --> 

<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpace"> 

<stop offset="0%" style="stop-color: #88f;"/> 

<stop offset="100%" style="stop-color: #008;"/> 

</linearGradient> 

</defs> 


<!-- 下面代码说明了如何使用animate元素来使圆产生动画效果,同时改变圆心的位置和半径的大小 --> 

<circle id="RectElement" cx="50" cy="50" r="50"  

fill="rgb(255,0,0)" style="fill: url(#grad1);"> 

<animate attributeName="cx" attributeType="XML" 

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" /> 

<animate attributeName="cy" attributeType="XML" 

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" /> 

<animate attributeName="r" attributeType="XML" 

xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" /> 

</circle> 


<!-- 建立一个新的坐标系统,并使文字旋转和放大 --> 

<g transform="translate(50,50)" > 

<!-- 下面的代码定义了“Hello,World!”这段文字,说明了'set','animateMotion', 

'animateColor'和'animateTransform'元素的用法。 --> 

<text id="TextElement" x="0" y="0" 

font-family="宋体-18030" font-size="18" visibility="hidden" >  

Hello,World! 

<set attributeName="visibility" attributeType="CSS" to="visible" 

begin="4s" dur="6s" fill="freeze" /> 

<animateMotion path="M 0 20 L 50 120"  

begin="4s" dur="6s" fill="freeze" /> 

<animateColor attributeName="fill" attributeType="CSS" 

from="rgb(0,0,255)" to="rgb(128,0,0)" 

begin="4s" dur="6s" fill="freeze" /> 

<animateTransform attributeName="transform" attributeType="XML" 

type="rotate" from="-90" to="0" 

begin="4s" dur="6s" fill="freeze" /> 

<animateTransform attributeName="transform" attributeType="XML" 

type="scale" from="1" to="3" additive="sum" 

begin="4s" dur="6s" fill="freeze" /> 

</text> 

<text x="145" y="285">http://lucky.myrice.com</text> 

</g> 

</svg>

posted @ 2005-12-16 18:52 WJH 阅读(439) | 评论 (0)编辑 收藏

 SVG中的声音关联
声音 
源代码: 
 
<?xml version="1.0" encoding="utf-8"?>

<svg xmlns:a="http://www.adobe.com/svg10-extensions" a:timeline="independent" width="100" height="50">

<a:audio xlink:href="love.mp3" begin="0s" />

<text x="50" y="20" style="fill: red; text-anchor: middle">
MP3+SVG=COOL
</text>

</svg>
 
 
 
讲解: 
 
SVG支持外部音乐文件的关联,通过SVG插件播放(建议使用adobe svg插件2.0 beta版).音乐文件格式可以是wav也可以是mp3.

绿色部分是声明部分.xmlns是xml的名字空间.(很奇怪,如果不用http://www.adobe.com/svg10-extentions作为名字空间,音乐无法正常播放,其原因还不明确--蓝骑士注).a:timeline声明时间线的长度,这里为不确定值independent.

红色部分是链接属性,播放音乐一定要使用a:audio标签.xlink:href指明链接地址,可以是绝对路径也可以是相对路径.begin表示音乐从哪个时间开始播放.可以自定义数值.

这里的mp3长度为90多k

posted @ 2005-12-16 18:50 WJH 阅读(671) | 评论 (0)编辑 收藏

仅列出标题
共4页: 1 2 3 4