📄 xml 问题 使用 svg 编程 - fanqiang_com.htm
字号:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css"><![CDATA[
rect {
fill: red;
stroke: blue;
stroke-width: 3
} ]]>
</style>
</defs>
<rect x="200" y="100" width="600" height="300"/>
</svg>
</CODE></PRE></TD></TR></TBODY></TABLE>
<P>尽管使用 CSS 无疑可以限定整个标签的样式，但您可能会发现，对 CSS 和 SVG
使用类选择器会更好。例如，您可以在样式表中定义各种类型的矩形，然后将一个 <CODE>class</CODE> XML
类属性附加到绘图中的每个矩形，而不用重复使用为类定义的整个颜色、填充、描边和其他属性列表。只须更改样式表，就可以更改图表的整体外观，使之更适用于不同的环境。</P>
<P><A name=IDAQHMX><SPAN class=atitle3>重复使用元素</SPAN></A><BR>除使用 CSS
之外，<A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code2"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 2</A> 显示了
SVG 另一种很好的功能：您可以在 SVG 文档中包括预定义的内容 —— 在呈现的文档内或文档之外定义的内容。</P>
<P>使用预定义内容作为 SVG 绘图一部分的方法之一是使用 <CODE><image></CODE>
元素。在概念上，SVG 中的 <CODE><image></CODE> 与 HTML 中的
<CODE><img></CODE> 非常类似：该元素只须指示呈现客户机在当前的 SVG 环境中绘制外部图像的内容 ——
其本身可能是 SVG 或者是 JPEG 或 PNG
格式的光栅图像。您几乎可以像调整一个规则的图形元素那样来调整外部图像的大小和改变其位置。例如： </P><A
name=code3><B>清单 3. 在当前图像中包括一个外部 SVG 绘图</B></A><BR>
<TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc
border=1>
<TBODY>
<TR>
<TD><PRE><CODE>
<image x="200" y="200" width="100px" height="100px"
xlink:href="http://example.org/external.svg">
</CODE></PRE></TD></TR></TBODY></TABLE>
<P>比 <CODE><image></CODE> 标签更有意思的也许是令人叫好的
<CODE><defs></CODE> 和 <CODE><use></CODE> 元素。首先，您可以使用 CSS
例子中所看到的内容 创建 SVG 元素，这些元素在定义时没有直接呈现 —— 通常，SVG 呈现模型严格按照 SVG
文档中出现的顺序绘制每个对象，每个对象均覆盖最后一个。但 <CODE><style></CODE>
不是典型的样式，以后不能真正呈现其<I
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">本身</I>。</P>
<P>您可以在诸如 <CODE><defs></CODE> 节中包括想要包括的任何图形元素，其中包括
<CODE><g></CODE> 组和 <CODE><symbol></CODE>
元素（符号与组类似；由于本文篇幅所限，这里不对其区别进行说明）。在定义的外部，您可以使用在
<CODE><defs></CODE> 节中定义的图形元素 —— 甚至可使用在外部 SVG 文档的
<CODE><defs></CODE> 节中定义的图形元素。例如：</P><A name=code4><B>清单 4.
使用预定义的图形元素</B></A><BR>
<TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc
border=1>
<TBODY>
<TR>
<TD><PRE><CODE>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7cm" height="3cm" viewBox="0 0 70 30" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>'use' with a 'transform' attribute</desc>
<defs>
<rect id="MyRect" x="0" y="0" width="40" height="5"/>
</defs>
<use xlink:href="#MyRect" transform="translate(10,23) rotate(-30)" />
<use xlink:href="#MyRect" transform="translate(20,3) rotate(30)" />
<use xlink:href="http://example.org/foo.svg#OtherRect"/>
</svg>
</CODE></PRE></TD></TR></TBODY></TABLE>
<P>在 <A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code4"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 4
中</A>，定义相同的矩形使用两种不同的转换呈现，然后还呈现了外部定义的元素。（<CODE>id</CODE>
名称表明它也是一个矩形，但从该片断中不能明显确定 —— 事实上，外部内容可以在呈现之间更改）。</P>
<P><A name=IDAU0FQB><SPAN class=atitle2>动画和脚本</SPAN></A><BR>刚才已提到，使用
ECMAScript 可以编写 SVG 脚本。原则上，这可让 SVG 文档与用户操作交互。为了支持 Web 应用程序空间，SVG
还包含一个用于超链接的与 HTML 类似的 <CODE><a></CODE> 元素。根据鼠标在特定的图形元素上单击，SVG
中的简单交互可以修改文档。<A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code5"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 5</A>
中的例子虽然很普通，但您可以方便地让 SVG 图形响应。例如，在下面的流程图中的图形或对象区域上单击：</P><A
name=code5><B>清单 5. 让 SVG 形状响应单击</B></A><BR>
<TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc
border=1>
<TBODY>
<TR>
<TD><PRE><CODE>
<svg>
<title>ECMAScript function for an onclick event</title>
<desc>Simplified from
http://www.w3.org/TR/SVG11/images/script/script01.svg</desc>
<script type="text/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
} ]]>
</script>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/>
</svg>
</CODE></PRE></TD></TR></TBODY></TABLE>
<P>您还可以使用 ECMAScript 和 DOM 让 SVG 图形产生动画效果。例如，<A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code6"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 6</A>
中的代码可以使文本产生一个好看的效果，即增加和更改不透明度：</P><A name=IDAV1FQB><B>清单 6. 使用
JavaScript 让 SVG 产生动画效果</B></A><BR>
<TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc
border=1>
<TBODY>
<TR>
<TD><PRE><CODE>
<svg viewBox="0 0 400 200"
onload="StartAnimation(evt)" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<script type="text/ecmascript"><![CDATA[
var txt, step=0;
function StartAnimation(evt) {
txt = evt.target.ownerDocument.getElementById("Text");
ShowAndGrowElement();
}
function ShowAndGrowElement() {
step = step+1;
if (step > 200) return;
// Scale text string gradually until it is 20 times larger
txt.setAttribute("transform", "scale("+ step/10 +")" );
// Make the string more opaque
txt.setAttribute("opacity", step/200);
// Call ShowAndGrowElement again 50 milliseconds later.
setTimeout("ShowAndGrowElement()", 50)
}
window.ShowAndGrowElement = ShowAndGrowElement
]]></script>
<g transform="translate(50,150)" fill="red" font-size="7">
<text id="Text">SVG</text>
</g>
</svg>
</CODE></PRE></TD></TR></TBODY></TABLE>
<P><A name=IDA11FQB><SPAN class=atitle3>纯粹的 SVG 脚本</SPAN></A><BR>使用
ECMAScript 可为您提供完美的编程灵活性，但如果您所需要的只是动画，SVG 还提供了
<CODE><animate></CODE> 和相关的标签（如
<CODE><animateMotion></CODE> 或
<CODE><animateColor></CODE>）。它们都非常灵活，可让您以各种方式分别赋予 SVG
文档中每个元素动画效果。例如，清单 6 中的代码可产生与 <A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/#code5"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">清单 5</A>
中所示技术相同的增加和呈现不透明效果：</P><A name=code6><B>清单 6. 单独使用 SVG
表现动画效果</B></A><BR>
<TABLE cellSpacing=0 cellPadding=5 width="100%" bgColor=#cccccc
border=1>
<TBODY>
<TR>
<TD><PRE><CODE>
<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(50,150)" fill="red" font-size="7">
<text id="Text">SVG
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="0" to="20" begin="0s" dur="10s"
fill="freeze" />
<animate attributeName="opacity" attributeType="CSS"
from="0" to="1" begin="0s" dur="10s" repeatCount="1" />
</text>
</g>
</svg>
</CODE></PRE></TD></TR></TBODY></TABLE>
<P><A name=IDA12FQB><SPAN class=atitle2>结束语</SPAN></A><BR>本文初步探讨了
SVG 格式的一些基本知识。撰写本文让我对 SVG 作为一种格式而感到兴奋不已。Web
确实需要矢量格式以与比例无关的方式有效地传达复杂图形。再加上脚本、动画、链接和所有其他内容使 SVG 更加有用。所幸的是，多数 Web
浏览器现在能够很好地支持 SVG，因此部署基于 SVG 的图形和简单的 Web 应用程序实际上并不存在什么障碍。</P><!-- 正文end --><BR>(http://www.fanqiang.com)<BR></FONT><BR><FONT
color=#999999><SMALL>原文链接：<A
href="http://www-128.ibm.com/developerworks/cn/xml/x-matters40/"
target=_blank>http://www-128.ibm.com/developerworks/cn/xml/x-matters40/</A></SMALL></FONT>
<BR></FONT></TD></TR></TBODY></TABLE><BR></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD align=middle width=620>
<TABLE cellSpacing=0 cellPadding=0 width=562 border=0>
<TBODY>
<TR>
<TD width=562>
<TABLE cellSpacing=0 cellPadding=0 width=562 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=5 width="100%" border=0>
<TBODY>
<TR>
<TD class=f14 bgColor=#666666><B><FONT color=#ffffff
size=2> <B>相关文章</B></FONT></B></TD></TR>
<TR>
<TD class=f14><A
href="http://fanqiang.chinaunix.net/program/html/2001-10-31/1981.shtml"
target=_blank>什么是XML？</A><FONT
color=gray> 2001-10-31 11:42:01</FONT> <BR><A
href="http://fanqiang.chinaunix.net/program/html/2001-05-13/1982.shtml"
target=_blank>XML初学者必读</A><FONT
color=gray> 2001-05-13 08:28:00</FONT> <BR><A
href="http://fanqiang.chinaunix.net/program/html/2001-10-29/2262.shtml"
target=_blank>中文 XML FAQ</A><FONT
color=gray> 2001-10-29 09:00:00</FONT> <BR><A
href="http://fanqiang.chinaunix.net/program/html/2002-01-29/2287.shtml"
target=_blank>使用Perl创建VoiceXML应用程序</A><FONT
color=gray> 2002-01-29 20:54:06</FONT> <BR><A
href="http://fanqiang.chinaunix.net/program/html/2002-01-29/2291.shtml"
target=_blank>用XML优化二次检索</A><FONT
color=gray> 2002-01-29 20:53:13</FONT> <BR><A
href="http://fanqiang.chinaunix.net/program/php/2002-01-31/2315.shtml"
target=_blank>用PHP实现XML备份Mysql数据库</A><FONT
color=gray> 2002-01-31
10:41:13</FONT><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD height=10></TD></TR></TBODY></TABLE><!--结束：底部-->
<TABLE width=750 border=0>
<TBODY>
<TR>
<TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1
src="XML 问题 使用 SVG 编程 - fanqiang_com.files/c.gif" width=1></TD></TR>
<TR>
<TD vAlign=top width="100%" colSpan=5 height=40>
<P align=center><FONT
color=#ffffff>★ 感谢所有的作者为我们学习技术知识提供了一条捷径 ★
<BR>www.fanqiang.com</FONT></P></TD></TR></TBODY></TABLE>
<CENTER></CENTER></TR></TBODY></TABLE></CENTER></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -