利用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图象如下图所示。 
 
 

此主题相关图片如下：

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

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>

声音 
源代码: 
 
＜?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

在SVG中使用滤镜效果和输出文字

为了使图像更生动形象，可以在SVG中使用滤镜效果和输出文字的基本方法。   
一、在SVG中使用滤镜效果 
在SVG中，我们可以直接对基本图象和文字使用这些效果，在SVG使用滤竟效果就和Adobe Photoshop、Macromedia Fireworks中一样，比如：阴影、高斯模糊、金属效果，颜色渐变等，SVG中的滤镜效果有feBlend、feColorMatrix、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset、feSpecularLighting、feTile、feTurbalance、feDistantLight、fePointLight、feSpotLight等。我们可以单独使用这些滤镜效果，也可以组合起来使用。由于这些滤镜的组合很多，我们很难在较短的篇幅里全部讲述，我们只是举其中的几个例子，来让初步认识一下在SVG中如何使用滤镜。   
 要在SVG中使用滤镜效果，必须把滤镜的定义嵌套在<defs>标记中，顾名思义，defs就是定义(definitions)的意思，它的作用就是定义一些特殊的元素，滤镜的定义也必须放到其中。定义一个滤镜效果，必须使用<filter>标记，同时必须指定一个id名（即唯一标识符），用以标识这个效果是应用到哪些图像上，下面举个具体的例子来加以说明： 
 <?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
 

  

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

  

<svg width="400" height="400"> 
 

  

<defs> 
 

  

<filter id="Gaussian_Blur_Test_for_Mengxianhui"> 
 

  

<feGaussianBlur in="SourceGraphic" stdDeviation="2"/> 
 

  

</filter> 
 

  

</defs> 
 

  

<rect x="59" y="77" width="163" height="34" style="filter:url(#Gaussian_Blur_Test_for_Mengxianhui);fill:rgb(128,128,255);stroke:rgb(128,0,128);stroke-width:5;" /> 
 

  

</svg> 
 

  

在上面的例子中，<filter id="Gaussian_Blur_Test_for_Mengxianhui">标记定义了一个高斯模糊的滤镜效果，id值在整个文件中应当是唯一的，文档中的其它元素也可以通过这个id值来重复使用这个滤镜，换句话说，<filter id="Gaussian_Blur_Test_for_Mengxianhui">就相当于一个模板，可以多次被调用。当我们要对某元素使用这个滤镜时，采用的语法是：filter：url(#Gaussian_Blur_Test_for_Mengxianhui)，并把它做为style属性的一部分，圆括号的“#”不能省略，它后面的文字就是滤镜定义中的id值。滤镜效果的定义放到<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>标记中，前导符“fe”在所有的滤镜中都有，是filter effect的缩写。例子中的滤镜效果是高斯模糊，stdDeviation属性描述模糊的强弱，数值越大，就越模糊。in="SourceGraphic"定义模糊模糊的效果是对整个图像，若使用SourceAlpha，则表示模糊效果是对图像的alpha通道的，in属性除了用在结果输出之外只有这两种可选择使用的值，在其它滤镜里也是这样，下面也将会讲到。高斯模糊中的stdDeviation这个属性值描述高斯模糊的偏离大小，如果给出两个属性值，则前一个参数代表沿x轴方向的偏离值，后一个值代表沿y轴的偏离值；如果给出一个参数，则代表沿x，y轴的偏离值是一样的。上面的例子的效果如下图所示： 
 

  

  
 

  

 

  

  
 

  

前面已经提到，对一个SVG图像来说，可以组合应用多个滤镜效果，下面看一个紊乱的效果： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 

  

<svg width="100%" height="100%"> 
 

  

<defs> 
 

  

<filter id="Turbulence"> 
 

  

<feTurbulence baseFrequency="0.03 0.02" numOctaves="5" type="turbulence" result="turbulenceOutput"/> 
 

  

<feComposite in="turbulenceOutput" in2="SourceAlpha" operator="in"/> 
 

  

</filter> 
 

  

</defs> 
 

  

<path d="M193.1 79.292 C224.16 88.7968 242.127 121.499 232.627 154.414 C223.127 187.328 239.995 220.003 271.913 229.504 C303.83 239.006 336.35 218.61 345 188.876 C323.124 264.909 248.755 285.576 198.994 270.349 C149.231 255.12 98.1789 196.096 120.144 119.992 C129.376 88.0081 162.039 69.7869 193.1 79.292 zM167.341 136.242 C167.341 141.144 170.673 145.311 176.03 145.311 C181.386 145.311 184.242 140.899 184.242 136.242 C184.242 131.584 180.796 127.762 175.91 127.785 C171.025 127.809 167.341 131.339 167.341 136.242 z" 
 

  

style="fill:rgb(192,192,255);stroke:rgb(130,0,61);stroke-width:1;filter:url(#Turbulence);" /> 
 

  

</svg> 
 

  

这个例子里使用了feTurbulence和feComposite滤镜的效果，在SVG中，滤镜可以使用result和in属性进行滤镜的相互嵌套。例子中，在turbulence滤镜里使用了result="turbulenceOutput"属性，表示这个滤镜的结果要输出到别的滤镜中去，feComposite使用in="turbulenceOutput"属性来使用上一个滤镜的输出结果，由于在这个滤镜中已经使用了in属性，因此，SVG提供了in2属性供我们使用，in和in2的作用是一样的；例子中in2="SourceAlpha"属性定义了这个滤镜的单一通道；operator 属性是feComposite滤镜特有的，用来描述合成的类型，可设定over，in，out，atop，xor，arithmetic中的任一个值，大家可以替换不同的值来查看效果的变化。例子中的baseFrequency属性用来描述混沌出现的频率，有x、y两方向的值可以设置。numOctaves属性设定混沌的间隔，可选1-8，默认为1。上面例子的结果如下： 
 

  

  
 

 

  

  
 

  

下面是一个比较复杂的例子，大家可以看看他的效果： 
 

  

<svg width="100%" height="100%"> 
 

  

<defs> 
 

  

<filter id="metallic"> 
 

  

<feGaussianBlur result="blurredAlpha" in="SourceAlpha" stdDeviation="3"/> 
 

  

<feOffset result="offsetBlurredAlpha" in="blurredAlpha" dx="2" dy="1"/> 
 

  

<feDiffuseLighting result="bumpMapDiffuse" in="blurredAlpha" surfaceScale="5" diffuseConstant="0.5" style="lighting-color:rgb(255,255,255)"> 
 

  

<feDistantLight azimuth="135" elevation="60"/> 
 

  

</feDiffuseLighting> 
 

  

<feComposite result="litPaint" in="bumpMapDiffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" in2="SourceGraphic"/> 
 

  

<feSpecularLighting result="bumpMapSpecular" in="blurredAlpha" surfaceScale="5" specularConstant="0.5" specularExponent="10" style="lighting-color:rgb(255,255,255)"> 
 

  

<feDistantLight azimuth="135" elevation="60"/> 
 

  

</feSpecularLighting> 
 

  

<feComposite result="litPaint" in="litPaint" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in2="bumpMapSpecular"/> 
 

  

<feComposite result="litPaint" in="litPaint" operator="in" in2="SourceAlpha"/> 
 

  

<feMerge> 
 

  

<feMergeNode in="offsetBlurredAlpha"/> 
 

  

<feMergeNode in="litPaint"/> 
 

  

</feMerge> 
 

  

</filter> 
 

  

</defs> 
 

  

<path d="M233.642 288 C249.9 265.728 318 231.266 318 195.613 C318 133.896 247.069 148.581 232.993 172.957 C218.041 147.832 149 137.805 149 195.613 C149 232.135 219.429 265.911 233.642 288 z" style="filter:url(#metallic);fill:rgb(255,38,255);stroke:rgb(11,11,13);stroke-width:1;" /> 
 

  

</svg> 
 

  

上面的例子的结果如下： 
 

  

  
 

  

 

  

  
 

  

下面我们看看渐变效果。渐变效果是指从一种颜色到另一种颜色的平滑过渡。SVG中有两种渐变方式：直线渐变和放射渐变。 
 

  

直线渐变<linearGradient>有水平渐变、垂直渐变和任意角度的渐变三种情况，如果y1、y2的值相同，而x2、x2的值不同，则代表水平渐变；y1、y2不同而x1、x2相同，达标垂直渐变；如果x1、x2，y1、y2都不同，则是角度渐变。颜色可以是两种或多种颜色的组合，每种颜色都要用<stop>标记来指定，它有两个属性：stop-color和stop-opacity，分别表示颜色和透明度。 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

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

  

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

  

<svg width="100%" height="100%"> 
 

  

<defs> 
 

  

<linearGradient id="Linear_Gradient_Test_For_Mengxianhui" x1="0%" y1="100%" x2="0%" y2="0%"> 
 

  

<stop offset="0%" style="stop-color：yellow；stop-opacity：1"/> 
 

  

<stop offset="50%" style="stop-color：red；stop-opacity：1"/> 
 

  

<stop offset="100%" style="stop-color：blue；stop-opacity：1"/> 
 

  

</linearGradient> 
 

  

</defs> 
 

  

<ellipse cx="200" cy="200" rx="80" ry="60" style="fill：url(#Linear_Gradient_Test_For_Mengxianhui)"/> 
 

  

</svg> 
 

  

上例中<linearGradient>标记定义了一个直线渐变，id属性定义该渐变的唯一标识，x1、y1定义了渐变的开始点坐标，x2、y2定义了渐变的结束点坐标，标记<stop>定义每一种颜色的信息，offset属性渐变色的开始或结束位置。该例子的结果如下： 
 

  

  
 

  

 

  

  
 

  

放射渐变由<radialGradient>标记定义，例子如下： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 

  

<svg width="420" height="220"> 
 

  

<defs> 
 

  

<radialGradient id="fade-to-black" cx="0%" cy="0%" r="20%" spreadMethod="reflect" gradientUnits="objectBoundingBox"> 
 

  

<stop offset="0%" style="stop-color:#F8C806;stop-opacity:1"/> 
 

  

<stop offset="50%" style="stop-color:#000099;stop-opacity:1"/> 
 

  

<stop offset="100%" style="stop-color:#458900;stop-opacity:1"/> 
 

  

</radialGradient> 
 

  

</defs> 
 

  

<rect x="10" y="10" width="400" height="200" style="fill:url(#fade-to-black);stroke:rgb(0,0,128); stroke-width:0" /> 
 

  

</svg> 
 

  

上面的cx，cy代表椭圆的圆心，r及rx，ry代表x方向和y方向的半径，spreadMethod代表平铺的方式，有pad，reflect和repeat三种方式。为了理解个参数的意义，您可以试着改变个参数的值，看看它们是如何控制的。该例子的结果如下： 
 

  

  
 

  

  
 

  

 

  

  
 

  

二、在SVG中输出文字 
 

  

  
 

  

在SVG中，文字都被看成是字符数据，所有的文字放到<text>标记中，但允许使用<tspan>标记进行嵌套，文字也是使用x，y属性在浏览器上进行定位的。例如： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

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

  

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

  

<svg width="100%" height="100%"> 
 

  

<text x="100px" y="120px" 
 

  

style="fill:rgb(0,0,0);font-size:36;font-family:Arial">WelCome To Mxh's Colorful World!</text> 
 

  

<text x="100px" y="160px" 
 

  

style="fill:rgb(255,0,0);font-size:36;font-family:Arial">http://lucky.myrice.com!</text> 
 

  

</svg> 
 

  

上面例子的结果如下： 
 

  

  
 

  

 

  

  
 

  

SVG中的文字是放在一个不可见的矩形区域里，因此，那个矩形区域内的文字被当成一行来处理，而不是象通常的浏览器那样把文字折行显示，要显示多行文字，就必须使用多个<text>标记。当然，我们也可以对文字使用样式，fill属性定义文字的填充颜色，font-size定义文字的字号大小，font-family属性定义文字的字型，SVG中的文字样式和CSS2中的文字样式一样，也有font-style，font-stretch等属性，Web开发人员对文字的显示有了更多的选择。 
 

  

文字也可以有透明度和图案填充，下面的例子是一个渐变的效果： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

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

  

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

  

<svg width="100%" height="100%"> 
 

  

<defs> 
 

  

<linearGradient id="violet-orange" x1="0%" y1="0%" x2="100%" y2="0%" 
 

  

spreadMethod="pad" gradientUnits="objectBoundingBox"> 
 

  

<stop offset="0%" style="stop-color:rgb(216,192,216);stop-opacity:1"/> 
 

  

<stop offset="100%" style="stop-color:rgb(175,23,87);stop-opacity:1"/> 
 

  

</linearGradient> 
 

  

</defs> 
 

  

<rect x="49" y="29" width="450" height="41" 
 

  

style="fill:rgb(0,0,0);stroke:none;stroke-width:1"/> 
 

  

<text x="70px" y="56px" 
 

  

style="fill:url(#violet-orange); font-size:20;font-weight:bold;font-family:Arial">Welcome to Meng Xianhui's Colorful World!</text> 
 

  

</svg> 
 

  

结果如下： 
 

  

  
 

  

 

  

  
 

  

此外，文字也可以使用滤镜效果，下面的例子就是显示阴影效果的文字： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

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

  

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

  

<svg width="100%" height="100%"> 
 

  

<defs> 
 

  

<filter id="Drop_Shadow" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%"> 
 

  

<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurredAlpha"/> 
 

  

<feOffset in="blurredAlpha" dx="3" dy="3" result="offsetBlurredAlpha"/> 
 

  

<feFlood result="flooded" style="flood-color:rgb(99,7,7);flood-opacity:0.65"/> 
 

  

<feComposite in="flooded" operator="in" in2="offsetBlurredAlpha" result="coloredShadow"/> 
 

  

<feComposite in="SourceGraphic" in2="coloredShadow" operator="over"/> 
 

  

</filter> 
 

  

</defs> 
 

  

<text x="126px" y="155px" style="fill:rgb(0,0,0); font-size:30; 
 

  

filter:url(#Drop_Shadow)">Welcome to Meng Xianhui's Colorful World!</text> 
 

  

</svg> 
 

  

结果如下： 
 

  

  
 

  

 

  

  
 

  

SVG中另一个重要的概念就是文字或图像的旋转，SVG中，任何元素都可以进行旋转，下面就是旋转文字的例子： 
 

  

<?xml version="1.0" standalone="no"?> 
 

  

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

  

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

  

<svg width="100%" height="100%"> 
 

  

<g style="color:#000000;font-weight:bold;font-style:normal;font-size:24"> 
 

  

<text x="18" y="18" transform="translate(7,7) rotate(30)">Welcome to Meng Xianhui's Colorful World!</text> 
 

  

</g> 
 

  

</svg> 
 

  

上面例子的结果如下： 
 

  

  
 

  

 

  

  
 

  

在上面的例子中使用了<g>标记，这个标记的作用是把里面的其他元素看成是一个完整的组， 和SVG中的嵌套相类似，但有一点是不同的，<g>元素允许使用transform属性，这个属性允许我们操纵其他对象的尺寸位置和形状，即可以是静态的，也可以是动态的。因此，如果你想对一个对象做旋转运动，或者做螺旋运动，或者是变形的效果，那么就可以使用transform属性，translate的值描述旋转的圆心坐标，rotate的值描述旋转的角度。 
 

  

要浏览以上例子的结果，你可以把代码拷贝到记事本里，最好是拷贝到XMLSpy里，然后保存为*.svg格式，就可以直接用IE6（IE5能否浏览我没有试验）或SVG Viewer来看到效果了。保存时应该注意编码方式，SVG是基于XML的文档格式，因此，文档结构应当满足XML的格式规范（Well-Formed）的要求。

利用XSLT生成SVG格式的数据统计图

可升级矢量图象（SVG）是新一代的图象标准，它具有矢量化、符合XML规范、可样式单化、文字可搜索、开放源代码等特性，正在逐渐被世界各大计算机软件厂商所支持。由于SVG图象完全符合XML标准，因此，我们就可以利用XSLT来生成SVG图象。下面，我们就某公司一年中的所有产品的月销售额来看看如何利用XSLT来生成SVG格式的数据统计图。数据统计图的样式非常多，有柱状图、饼图、折线图、三维立体效果图等等，我们这里将介绍簇状柱形图、堆积柱形图和饼图。由于篇幅所限，我们这次仅介绍簇状柱形图，我们会在以后文章中介绍其它两种数据统计图的生成方法。 

目前，没有一个浏览器完全支持SVG图象的显示，为了能够看到本例子中效果，您必须安装SVG Viewer 3.0插件，下载地址：http://www.adobe.com/svg/viewer/install/main.html。在Windows XP平台上，自带了Microsoft Internet Explorer 6，但是它是Adobe SVG Viewer 2.0的插件，对中文的支持不好，但可以直接浏览没有中文文字的SVG图象，把本例中的中文换成英文，也可以浏览本例中的代码。我们的例子在支持UTF-16的平台上可以很好地显示，我们就以中文为例。 

首先，我们准备所需要的数据，格式是XML的。由于目前许多大型数据库都提供了对XML查询结果的支持，因此，您可以直接利用数据库来生成XML数据文件，也可以经过查询，再用编写组件的方法来生成需要的XML数据文件。我们的XML数据文件Data.xml格式如下： 

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

<sales_summary> 

<Month_sales Month_no="1"> 

<product_sales product_id="PC_INTEL_001" quantity="5" value="5000.00"/> 

<product_sales product_id="PC_INTEL_002" quantity="10" value="1500.00"/> 

</Month_sales> 

<Month_sales Month_no="2"> 

<product_sales product_id="PC_INTEL_001" quantity="4" value="4000.00"/> 

<product_sales product_id="PC_INTEL_002" quantity="10" value="3000.00"/> 

<product_sales product_id="PC_AMD_001" quantity="20" value="1500.00"/> 

<product_sales product_id="PC_AMD_002" quantity="20" value="1800.00"/> 

<product_sales product_id="PC_DIGITAL_001" quantity="11" value="50.00"/> 

<product_sales product_id="PC_DIGITAL_002" quantity="18" value="600.00"/> 

</Month_sales> 

<!-- 限于篇幅所限，我们这里省略了3月份到11月份的数据，如果浏览时，请自行添加上，格式同前 --> 

<Month_sales Month_no="12"> 

<product_sales product_id="PC_INTEL_001" quantity="56" value="200.00"/> 

<product_sales product_id="PC_INTEL_002" quantity="10" value="500.00"/> 

<product_sales product_id="PC_AMD_001" quantity="61" value="1500.00"/> 

<product_sales product_id="PC_AMD_002" quantity="8" value="2100.00"/> 

<product_sales product_id="PC_DIGITAL_001" quantity="2" value="500.00"/> 

<product_sales product_id="PC_DIGITAL_002" quantity="6" value="1200.00"/> 

</Month_sales> 

</sales_summary> 

下面，我们看看最关键的XSLT部分，由于在这里用到了XSLT，请把您的MsXML2文件升级到最新的MsXML3.0 SP2或MsXML4.0，可以到微软的网站下载：http://www.microsoft.com/xml/。文中每一代码段都进行了注释说明。XSLTToGraph.xsl： 

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

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

<!-- 定义XSLT转换后输出的文件的格式，这里输出为XML格式的文件内容 --> 

<xsl:output method="xml" indent="yes" encoding="UTF-8" version="1.0" standalone="no" media-type="image/svg+xml"/> 

<!-- 以下定义全局变量 --> 

<!-- 柱状图每个柱的宽度 --> 

<xsl:variable name="bar_width" select="number(80)"/> 

<!-- 每个柱之间的间隔 --> 

<xsl:variable name="bar_spacing" select="number(10)"/> 

<!-- 图象高度 --> 

<xsl:variable name="graph_height" select="number(500)"/> 

<!-- 图象的左边界 --> 

<xsl:variable name="left_margin" select="number(100)"/> 

<xsl:template match="/"> 

<!-- SVG的主体部分开始 --> 

<svg id="body" viewBox="0 0 -100 {$graph_height + 100}"> 

<!-- 下面的代码实现鼠标的onMouseOver和onMouseOut事件执行的代码，显示或隐藏当月的销售额 --> 

<script type="text/ECMAScript"><![CDATA[ 

function On_MouseOver(evt,HideShow_ID){ 

// 得到目标对象 

var target = evt.getTarget(); 

var doc = target.getOwnerdocument．);

var HideShow = doc.getElementById(HideShow_ID); 

HideShow.setAttribute('style', 'visibility:visible'); 

} 

function On_MouseOut(evt,HideShow_ID){ 

var target = evt.getTarget(); 

var doc = target.getOwnerdocument．); 

var HideShow = doc.getElementById(HideShow_ID); 

HideShow.setAttribute('style', 'visibility:hidden'); 

} 

]]></script> 

<title>月销售纪录</title> 

<!-- 柱状图的主体部分 --> 

<g id="barChart" transform="translate(10, 10)" fill-rule="nonzero" clip-rule="nonzero" stroke="none" class="legend" 

stroke-width="1" stroke-linecap="square" stroke-miterlimit="1" style="text-anchor:start" shape-rendering="crispEdges"> 

<!-- 应用数据模板 --> 

<xsl:apply-templates select="sales_summary"/> 

<text text-anchor="middle" transform="matrix(2 0 0 2 {$left_margin + 150} {$graph_height + 70})">某公司每月产品销售纪录</text> 

</g> 

</svg> 

</xsl:template> 

<!-- 数据模板开始 --> 

<xsl:template match="sales_summary"> 

<!-- 计算月数 --> 

<xsl:variable name="weeks_count" select="count(Month_sales)"/> 

<!-- 计算月最大的销售额 --> 

<xsl:variable name="max_week_sales_value"> 

<xsl:for-each select="Month_sales"> 

<xsl:sort select="sum(product_sales/@value)" data-type="number" order="descending"/> 

<xsl:if test="position() = 1"> 

<xsl:value-of select="sum(product_sales/@value)"/> 

</xsl:if> 

</xsl:for-each> 

</xsl:variable> 

<!-- 柱状图相对高度，圆整为100 --> 

<xsl:variable name="max_graph_height" select="floor(($max_week_sales_value + 99) div 100) * 100"/> 

<!-- 调用模板，画出柱状图的背景及图例文字和边框线 --> 

<xsl:call-template name="draw_graph"> 

<xsl:with-param name="max_graph_height" select="$max_graph_height"/> 

<xsl:with-param name="bar_count" select="$weeks_count"/> 

</xsl:call-template> 

<!-- 调用模板，画出柱状图及图例文字 --> 

<xsl:apply-templates select="Month_sales"> 

<xsl:sort select="@Month_no" data-type="number"/> 

<xsl:with-param name="max_graph_height" select="$max_graph_height"/> 

</xsl:apply-templates> 

</xsl:template> 

<xsl:template name="draw_graph"> 

<xsl:param name="max_graph_height"/> 

<xsl:param name="bar_count"/> 

<xsl:variable name="actual_width" select="($bar_count * ($bar_width + $bar_spacing)) + $bar_spacing"/> 

<g id="GridAndLegend" style="stroke:#00FF00;" shape-rendering="crispEdges" stroke-width="1"> 

<!-- 画出背景颜色和边框线 --> 

<path fill="rgb(255, 235, 205)" stroke="#000099" d="M {$left_margin},{$graph_height + 20} h{$actual_width} v-{$graph_height + 10} h-{$actual_width} v{$graph_height +10}"/> 

<!-- 画出原点和水平线 --> 

<path fill="none" stroke="#FF0000" d="M {$left_margin - 10},{$graph_height + 20} h10"/> 

<text text-anchor="end" baseline-shift="-3" transform="matrix(1 0 0 1 {$left_margin - 15} {$graph_height + 20})">0</text> 

<!-- 画出垂直线和图例文字 --> 

<xsl:call-template name="draw_graph_vertical_legends"> 

<xsl:with-param name="max" select="$max_graph_height"/> 

<xsl:with-param name="legend_threshold" select="$max_graph_height div $graph_height"/> 

<xsl:with-param name="actual_width" select="$actual_width"/> 

</xsl:call-template> 

</g> 

</xsl:template> 

<!-- 递归调用的模板，画出垂直线和图例说明 --> 

<xsl:template name="draw_graph_vertical_legends"> 

<xsl:param name="max"/> 

<xsl:param name="legend_threshold"/> 

<xsl:param name="actual_width"/> 

<!-- 开始数字和步长 --> 

<xsl:param name="start" select="number(100)"/> 

<xsl:param name="step" select="number(100)"/> 

<xsl:param name="prev_marked_start" select="number(0)"/> 

<!-- 计算垂直位置 --> 

<xsl:variable name="prev_vert_posn" select="($prev_marked_start div $max) * $graph_height"/> 

<xsl:variable name="vert_posn" select="($start div $max) * $graph_height"/> 

<!-- 计算本水平线和上一条水平线的间距 --> 

<xsl:variable name="new_marked_start"> 

<xsl:choose> 

<xsl:when test="($vert_posn - $prev_vert_posn) >= $legend_threshold"> 

<xsl:value-of select="$start"/> 

</xsl:when> 

<xsl:otherwise> 

<xsl:value-of select="$prev_marked_start"/> 

</xsl:otherwise> 

</xsl:choose> 

</xsl:variable> 

<!-- 画出间距不小于一个单位的水平线和图例说明文字 --> 

<xsl:if test="$new_marked_start = $start"> 

<path fill="none" stroke="#FF0000" d="M {$left_margin - 10},{$graph_height + 20 - floor($vert_posn)} h{$actual_width + 10}"/> 

<text text-anchor="end" baseline-shift="-3" transform="matrix(1 0 0 1 {$left_margin - 15} {$graph_height + 20 - floor($vert_posn)})"> 

<xsl:value-of select="$start"/> 

</text> 

</xsl:if> 

<!-- 如果没有到达最大值，递归调用本模板 --> 

<xsl:if test="$start < $max"> 

<xsl:call-template name="draw_graph_vertical_legends"> 

<xsl:with-param name="max" select="$max"/> 

<xsl:with-param name="legend_threshold" select="$legend_threshold"/> 

<xsl:with-param name="actual_width" select="$actual_width"/> 

<xsl:with-param name="start" select="$start + $step"/> 

<xsl:with-param name="step" select="$step"/> 

<xsl:with-param name="prev_marked_start" select="$new_marked_start"/> 

</xsl:call-template> 

</xsl:if> 

</xsl:template> 

<!-- 画出每月的销售纪录图 --> 

<xsl:template match="Month_sales"> 

<xsl:param name="max_graph_height"/> 

<!-- 画出每月的销售额柱状图，以下三个变量分别代表：当月销售总额、柱的高度、柱的左边坐标位置 --> 

<xsl:variable name="sales_value" select="sum(product_sales/@value)"/> 

<xsl:variable name="bar_height" select="floor(($sales_value div $max_graph_height) * $graph_height)"/> 

<xsl:variable name="bar_left" select="((position() - 1) * ($bar_width + $bar_spacing)) + $bar_spacing"/> 

<!-- 画出柱，并且添加鼠标事件执行的函数 --> 

<path fill="#0066FF" stroke="none" d="M {$bar_left + $left_margin},{$graph_height + 19} h{$bar_width} v-{$bar_height} h-{$bar_width} v{$bar_height}" 

onmouseover="On_MouseOver(evt,'HideShow_{@Month_no}')" onmouseout="On_MouseOut(evt,'HideShow_{@Month_no}')"/> 

<!-- 画出图示说明 --> 

<text text-anchor="middle" transform="matrix(1.5 0 0 1.5 {$left_margin + $bar_left + ($bar_width div 2)} {$graph_height + 40})"> 

<xsl:value-of select="@Month_no"/> 

<xsl:text>月</xsl:text> 

</text> 

<!-- 创建鼠标移出时的图样,包括直线和文字 --> 

<g id="HideShow_{@Month_no}" style="visibility: hidden;"> 

<!-- 画出水平线 --> 

<path fill="none" stroke="red" d="M {$left_margin - 10},{$graph_height + 20 - $bar_height} h{$bar_left + 10}"/> 

<!-- 写出文字（销售额），并进行格式化 --> 

<text transform="matrix(1 0 0 1 {$left_margin + $bar_left + 2} {($graph_height + 30) - $bar_height})"> 

<xsl:value-of select="format-number($sales_value,'#,##0')"/> 

</text> 

</g> 

</xsl:template> 

</xsl:stylesheet> 

最后，要在页面中看到SVG格式的统计图，有两种办法：一是直接在客户端转换，在Data.xml使用XSL样式单即可；二是利用ASP在服务器端先进行转换，再输出到客户端。我们这里采用ASP来完成，因为，如果有多种统计图样式的话，这样可以让用户进行选择显示，调用不同的XSL文件即可。DataToSVG.asp文件如下： 

<%@ Language="VBScript"%> 

<Meta Name="Author" Content="lht"> 

<Meta Name="WebSite" Content="http://free.cnyys.com/my/freebird/index.asp"> 

<Meta Name="WebSite" Content="http://www.yahoo.com.cn"> 

<Meta Name="CopyRight" Content"> 

<% 

Response.Clear 

Response.Buffer = True 

Dim xmlDom, xslDom, strResult 

Set xmlDom = Server.CreateObject("Msxml2.DOMdocument．quot;) 

Set xslDom = Server.CreateObject("Msxml2.FreeThreadedDOMdocument．quot;) 

xmlDom.async = False 

xslDom.async = False 

xmlDom.load Server.MapPath("Data.xml") 

xslDom.load Server.MapPath("XSLTToGraph.xsl") 

Response.ContentType = "image/svg+xml" 

strResult = xmlDom.transformNode(xslDom) 

' 在不支持UTF-16编码的饿平台上，替换成UTF-8 

strResult = Replace(strResult,"UTF-16","UTF-8") 

Response.Write strResult 

%>

你们可以看看效果如何，点击柱形还可以改变颜色。
我现在做的系统是VC++编码的，我的这段svg代码也是VC++生成的，我这里的动态数据是随机获得的，但我们的系统要求根据系统中指定的动态变量显示柱形图，我不知道如何使javascript与我的系统通讯获得系统中的动态数据变量，大家出出主意吧！
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink" onload="setheight()">
<script type="text/javascript">
<![CDATA[
  var svgRoot=document.documentElement;
  var redVal=0;
  var greenVal=0;
  var blueVal=0;
  function  setColor(evt)
    {
     var target=evt.getTarget();
     redVal=Math.round(Math.random()*255);
     greenVal=Math.round(Math.random()*255);
     blueVal=Math.round(Math.random()*255);
     target.setAttribute("fill","rgb("+redVal+","+greenVal+","+blueVal+")");
    }
  function  setheight()
    {
      var rect1,long,long1;
      rect1=svgRoot.getElementById("rect1");
      long=Math.round(Math.random()*200);
      rect1.setAttribute("height",long);
      rect1.setAttribute("y",600-long);
      setTimeout("setheight()",1000);
    }
//]]>
</script>
<g>
 <line x1="100" y1="100" x2="100" y2="600" stroke="rgb(0,0,0)"/>
 <line x1="100" y1="600" x2="600" y2="600" stroke="rgb(0,0,0)"/>
 <line x1="100" y1="350" x2="600" y2="350" />
 <line x1="100" y1="100" x2="600" y2="100" />
 <text x="98" y="105" text-anchor="end"> 1000 </text>
 <text x="98" y="355" text-anchor="end">  500 </text>
 <rect id="rect1" x="105" y="400" height="200" width="40" onclick="setColor(evt)"/>
 <rect x="150" y="200" height="400" width="40" onclick="setColor(evt)"/>
 <rect x="195" y="300" height="300" width="40" onclick="setColor(evt)"/>
 <rect x="240" y="100" height="500" width="40" onclick="setColor(evt)"/>
 <rect x="285" y="120" height="480" width="40" onclick="setColor(evt)"/>
 <rect x="330" y="500" height="100" width="40" onclick="setColor(evt)"/>
 <rect x="375" y="440" height="160" width="40" onclick="setColor(evt)"/>
 <defs>
 <polyline id="polyline" points="97,107 100,100 103,107"/>
 </defs>
 <use xlink:href="#polyline"/>
 <use xlink:href="#polyline" transform="translate(700,500) rotate(90)"/>
</g>
</svg>