对象的调用＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="50" height="50"＞＜defs＞＜rect id="rect" width="15" height="15" style="fill:red" /＞＜/defs＞＜use x="5" y="5" xlink:href="#rect" /＞＜use x="30" y="30" xlink:href="#rect" /＞＜/svg＞讲解:如果一个SVG对象需要被多次使用,您可以首先对该对象进行声明定义.定义使用＜defs＞＜/defs＞标签,定义中必须包括识别码ID.当您需要使用对象时,使用＜use .../＞标签,并确定放置对象的位置,并利用xlink链接对象的识别码,完成调用.文字居左对齐＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="50" height="50"＞＜text x="0" y="20" style="fill: red"＞SVG＜/text＞＜/svg＞在SVG中使用＜text＞＜/text＞标签定义文字.
x,y属性决定文字的位置.＜text＞默认为文字居左对齐.也就是文字的轴线在文字的最左边线,图中,取轴线为x=0,与画布的最左边线一致,我们看到文字居左对齐.
文字居中对齐＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="50" height="50"＞＜text x="50" y="13" style="fill: red; text-anchor: middle"＞SVG＜/text＞＜/svg＞居中对齐也就是文字的轴线在文字的中心.图中取x=50为轴线,我们很清楚的看到,轴线落在文字的中心.(另半边由于落在图像画布外,所以没有显示.
文字居右对齐＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="50" height="50"＞＜text x="50" y="13" style="fill: red; text-anchor: end"＞SVG＜/text＞＜/svg＞居右对齐也就是文字的轴线在文字的最右边线.图中取x=50为轴线,与画布的最右边线一致.我们很清楚的看到,轴线落在文字的最右边.
分行显示＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="50" height="50"＞＜text x="0" y="13" style="fill: red"＞Line 1＜tspan x="0" dy="0.5cm"＞Line 2＜/tspan＞＜/text＞＜/svg＞文字的分行显示主要利用了＜tspan＞＜/tspan＞标签.tspan用于对文字的显示进行单独的控制.范例使用的dy属性是一个纵向相对位移值,它用于区分上下两行文字间的纵向相对位移.您可以试着将dy属性删去,此时会发现line1被line2覆盖而无法显示.tspan除了dy,还有x,y,dx,dy,rotate,textlength等属性.
文字路径＜?xml version="1.0" encoding="utf-8"?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞＜svg width="100" height="50"＞＜defs＞＜path id="textPath" d="M10 50 C10 0 90 0 90 50" /＞＜/defs＞＜text style="fill: red; text-anchor:middle"＞＜textPath xlink:href="#textPath"＞Text on a Path＜/textPath＞＜/text＞＜/svg＞制作文字路径首先需要对路径进行声明定义(绿色部分).在文字中,使用＜textpath＞＜/textpath＞标签,并利用前面介绍的xlink调用方法完成文字附着路径动作.
鼠标点击＜?xml version=＂1.0＂ encoding=＂utf-8＂?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width=＂50＂ height=＂50＂＞
＜＞＜![CDATA[function change_color(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var rect = SVGDoc.getElementById(＂rect＂);var style = rect.getStyle();
style.setProperty(＂fill＂, ＂blue＂)}]]＞＜/＞
＜rect id=＂rect＂ x=＂5＂ y=＂5＂ width=＂40＂ height=＂40＂style=＂fill: red＂ οnclick=＂change_color(evt)＂/＞
＜/svg＞oncilck加上触发的java事件,构成svg响应鼠标点击的效果. 绿色部分为java程序段,用于确定函数change_color(evt)触发时发生的事件--这里是将标识符为rect的矩形改变颜色.oncilck加上触发的java事件,构成svg响应鼠标点击的效果.
绿色部分为java程序段,用于确定函数change_color(evt)触发时发生的事件--这里是将标识符为rect的矩形改变颜色.
鼠标按下＜?xml version=＂1.0＂ encoding=＂utf-8＂?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width=＂50＂ height=＂50＂＞
＜＞＜![CDATA[function change_color(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var rect = SVGDoc.getElementById(＂rect＂);var style = rect.getStyle();
style.setProperty(＂fill＂, ＂blue＂)}]]＞＜/＞
＜rect id=＂rect＂ x=＂5＂ y=＂5＂ width=＂40＂ height=＂40＂style=＂fill: red＂ οnmοusedοwn=＂change_color(evt)＂/＞
＜/svg＞onmousedown加上触发的java事件,构成svg响应鼠标按下的效果.
鼠标移动＜?xml version=＂1.0＂ encoding=＂utf-8＂?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width=＂50＂ height=＂50＂＞
＜＞＜![CDATA[function change_color(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var rect = SVGDoc.getElementById(＂rect＂);var style = rect.getStyle();
style.setProperty(＂fill＂, ＂blue＂)}]]＞＜/＞
＜rect id=＂rect＂ x=＂5＂ y=＂5＂ width=＂40＂ height=＂40＂style=＂fill: red＂ οnmοusemοve=＂change_color(evt)＂/＞
＜/svg＞onmousemove加上触发的java事件,构成svg响应鼠标移动的效果.
鼠标在对象上＜?xml version=＂1.0＂ encoding=＂utf-8＂?＞＜!-- Author : Blueknight,Hangzhou,China 2000 --＞
＜svg width=＂50＂ height=＂50＂＞
＜＞＜![CDATA[function change_color(evt) {var SVGDoc = evt.getTarget().getOwnerDocument();var rect = SVGDoc.getElementById(＂rect＂);var style = rect.getStyle();
style.setProperty(＂fill＂, ＂blue＂)}]]＞＜/＞＜rect id=＂rect＂ x=＂5＂ y=＂5＂ width=＂40＂ height=＂40＂style=＂fill: red＂ οnmοuseup=＂change_color(evt)＂/＞
＜/svg＞onmouseup加上触发的java事件,构成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表示音乐从哪个时间开始播放.可以自定义数值.
相关资源：敏捷开发V1.0.pptx