SVG元素代码解释.docx
- 文档编号:3035278
- 上传时间:2022-11-17
- 格式:DOCX
- 页数:37
- 大小:230.74KB
SVG元素代码解释.docx
《SVG元素代码解释.docx》由会员分享,可在线阅读,更多相关《SVG元素代码解释.docx(37页珍藏版)》请在冰豆网上搜索。
SVG元素代码解释
SVG元素和代码解释
SVG中图形元素(graphicselement)是可以用来在目标画布上画出图形的元素,包括定义的标准形状,特别是矩形、圆形、椭圆形、直线、折线和多边形等。
文章介绍了SVG元素的代码及其含意。
SVG元素分为图形元素、容器元素、图形引用元素、文本、SVG文档片断内容。
来源:
SVG中国(ChinaSVG.COM)
1图形元素
SVG中图形元素(graphicselement)是可以用来在目标画布上画出图形的元素,包括定义的标准形状,特别是矩形、圆形、椭圆形、直线、折线和多边形等。
(1)矩形
矩形用元素rect来表达
代码:
含意:
绘制宽200像素,高100像素,填充色为绿色的矩形
(2)圆形
圆形用元素circle来表达
代码:
含意:
绘制半径为50像素,填充色为蓝色的圆形
(3)线段
线段用元素line来表达
代码:
含意:
从点(50,50)到点(200,200)绘制一条蓝色10像素宽的线段
(4)椭圆
椭圆用元素ellipse来表达
代码:
含意:
绘制x轴半径为100像素,y轴半径为50像素,边线为绿色的椭圆
(5)折线
折线用元素polyline来表达
代码:
含意:
从点(100,0)开始,经过点(93,16),(72,26),(43,25),(13,11),(-11,-13),(-16,-93),(0,-100),(16,-93),(26,72),(25,-43),(11,43),(-13,11),(-43,25),(-72,26),(-93,16),最后到点(-100,0)绘制一条线宽为1像素的绿色折线
(6)多边形
多边形用元素polygon来表达
代码:
含意:
以(100,100)(150,100)(300,200)(50,200)四个点为顶点绘制填充色为蓝色的多边形,该多边形是一个梯形
(7)路径
路径用元素path来表达
代码:
含意:
按动作定义一条填充色为绿色的路径“移动原点到(200,200),向Y方向直线运动100,向X方向直线运动200,向Y的反方向直线运动100,向X的反方向直线运动200",该路径表达了一个矩形
2容器元素
容器元素用于将不同的元素组合起来使用。
它通常和
在一个大型或复杂的图形中使用
3图形引用元素
图形引用元素(graphicsreferencingelement)用对不同文档或元素的引用作为其图形内容的图形元素。
4文本内容
元素文本内容元素(textcontentelement)是一个可以定义文本串的画在画布上的SVG元素,SVG文本内容元素有:
5SVG文档片断
SVG文档片断(SVGdocumentfragment)是以
SVG文档片断可以包含独立的SVG文档,或是另一个SVG文档片断。
当一个
以下用
与
(1)可以拥有自己的位置属性
即x和y属性,所有
这样只要改变
(2)可以拥有自己的高宽属性
即width和height属性,所有超出
这样一些拉幕动画就可以实现了。
(3)可以拥有显现属性
即display属性,修改该属性可以让所有
这样整体一起的出现和消失就方便很多。
SVG鼠标事件响应的四种写法
SVG有四种常用的鼠标响应的脚本写法(SMIL方式、Attributes方式、JavaScript+SMIL方式、EventListener方式),根据不同的需要让大家有更多的选择。
本文介绍了四种实现SVG鼠标事件的例子。
来源:
SVG中国(ChinaSVG.COM)
SVG鼠标事件实现方式的例子效果是:
单击一个红色的矩形后,它的填充颜色会变成蓝色
1SMIL方式
例程1 鼠标事件之SMIL方式
在前面有关“动画”效果的章节中我们使用过类似的方法,也就是在单击后触发一个动画效果,此例中被改变的是“fill”属性,由红变蓝,中间没有渐变的过程,一次到位。
2Attributes方式
例程2 鼠标事件之Attributes方式
//www.w3.org/2000/svg" xmlns: xlink=http: //www.w3.org/1999/xlink xmlns: a3=" a3: scriptImplementation="Adobe"> scriptImplementation="Adobe"> [CDATA[ functionchangeColor(evt) { varrect=evt.target; rect.setAttributeNS(null,"fill","blue") } ]]> fill="red" onclick="changeColor(evt)"/>u 这种事件触发方式想必大家已经很熟悉了,在上一节中,满眼尽是这种事件触发方式,即把事件触发作为元素的属性与其它其他属性写在一起。 事件属性在u处,“onclick”事件调用的是“changeColor”函数,参数是“evt”,这样使得函数内部脚本可以从“evt”获得事件相关信息。 这种方式比较常用。 3JavaScript+SMIL方式 例程3 鼠标事件之JavaScript+SMIL方式 这个例子没有图形元素的事先定义,所有定义都是通过脚本完成的,包括事件的定义也都是动态脚本完成的,最后在内存中的SVGDOM机构与例程1是类似的。 例程3中,v处的“createElementNS”方法,有了一个后缀“NS”是需要添加命名空间参数的,这里的命名空间定义在u处。 4EventListener方式 例程4 鼠标事件之EventListener方式
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1