SVG基础

对象的调用
＜?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表示音乐从哪个时间开始播放.可以自定义数值.