杨凌规划建设局网站,wordpress 商品 插件,虚拟机如何做网站,建网站用的免费软件1. 前言 SVG#xff08;Scalable Vector Graphics#xff0c;可缩放矢量图形#xff09;是一种使用XML描述2D图形的语言#xff0c;由于SVG是基于XML#xff08;HTML也是基于XML的#xff09;#xff0c;因为SVG DOM中每个元素都是可以操作的#xff0c;包含修改元素属…1. 前言 SVGScalable Vector Graphics可缩放矢量图形是一种使用XML描述2D图形的语言由于SVG是基于XMLHTML也是基于XML的因为SVG DOM中每个元素都是可以操作的包含修改元素属性、添加事件处理器HTML5支持内联SVG。 本篇梳理和总结SVG绘制图形的DOM元素。
2. SVG元素 坐标系左上点是坐标原点(0,0)x轴正方向向右y轴正方向向下。 视口viewportSVG宽高确定视口大小默认宽高(300px, 150px)。
元素说明示例rect 功能创建一个矩形 属性 x 矩形的左侧位置 y 矩形的顶端位置 width 矩形的宽度 height 矩形的高度 rx x方向圆角半径 ry y方向圆角半径 svg xmlnshttp://www.w3.org/2000/svg version1.1 rect x50 y20 width150 height150 stylefill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9/ /svg 继承关系SVGRectElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectcircle 功能创建一个圆形 属性 cx 圆心x轴坐标 cy 圆心y轴坐标 r 圆的半径 svg xmlnshttp://www.w3.org/2000/svg version1.1 circle cx100 cy50 r40 strokeblack stroke-width2 fillred/ /svg 继承关系SVGCircleElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectellipse 功能创建一个椭圆 属性 cx 椭圆圆心x轴坐标 cy 椭圆圆心y轴坐标 rx 椭圆x轴半径 ry 椭圆y轴半径 svg xmlnshttp://www.w3.org/2000/svg version1.1 ellipse cx300 cy80 rx100 ry50 stylefill:yellow;stroke:purple;stroke-width:2/ /svg 继承关系SVGEllipseElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectline 功能创建一条直线 属性 x1 直线起点x轴坐标 y1 直线起点y轴坐标 x2 直线终点x轴坐标 y2 直线终点y轴坐标 svg xmlnshttp://www.w3.org/2000/svg version1.1 line x10 y10 x2200 y2200 stylestroke:rgb(255,0,0);stroke-width:2/ /svg 继承关系SVGLineElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectpolyline 功能创建一条折线/多段线 属性 points 折线的坐标点列表形式x1,y1 x2,y2 x3,y3 ...... svg xmlnshttp://www.w3.org/2000/svg version1.1 polyline points20,20 40,25 60,40 80,120 120,140 200,180 stylefill:none;stroke:black;stroke-width:3 / /svg 继承关系SVGPolylineElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectpolygon 功能创建一个多边形 属性 points 多边形的坐标点列表形式x1,y1 x2,y2 x3,y3 ...... svg xmlnshttp://www.w3.org/2000/svg version1.1 height210 width500 polygon points200,10 250,190 160,210 stylefill:lime;stroke:purple;stroke-width:1/ /svg 继承关系SVGPolygonElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectpath 功能创建一个路径 属性 d 路径定义 M moveto 移动起点到 L lineto 绘制直到到 H horizontal lineto 水平绘制线到 V vertical lineto 垂直绘制直线到 C curveto 绘制三次贝塞尔曲线 S smooth curveto 绘制三次贝赛尔曲线多根连续 Q quadratic Bézier curve 绘制二次贝塞尔曲线 T smooth quadratic Bézier curveto 绘制二次贝塞尔曲线多根连续 A elliptical Arc 椭圆弧 Z closepath 闭合路径 大写表示绝对位置小写表示相对位置 svg xmlnshttp://www.w3.org/2000/svg version1.1 path dM150 0 L75 200 L225 200 Z / path dM 100 350 q 150 -300 300 0 strokeblue stroke-width5 fillnone / /svg Q或q 有2个坐标点第1个是参考点第2个是目标点 C或c 有3个坐标点第1个和第2个是参考点第3个是目标点 继承关系SVGPathElement - SVGGeometryElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objecttext 功能定义文本 属性 x 文本起始位置x轴坐标 y 文本起始位置y轴坐标 svg xmlnshttp://www.w3.org/2000/svg version1.1 text x0 y15 fillredI love SVG/text /svg 继承关系SVGTextElement - SVGTextPositioningElement - SVGTextContentElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objecttspan 功能定义文本的位置 x 文本起始位置x轴坐标 y 文本起始位置y轴坐标 svg xmlnshttp://www.w3.org/2000/svg version1.1 text x10 y20 stylefill:red; Several lines: tspan x10 y45First line/tspan tspan x10 y70Second line/tspan /text /svg 继承关系SVGTSpanElement - SVGTextPositioningElement - SVGTextContentElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Objectdefs 功能定义图形但不绘制供其他元素引用 略继承SVGDefsElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - ObjecttextPath 功能引用文本路径 href引用的路径地址 svg xmlnshttp://www.w3.org/2000/svg version1.1 xmlns:xlinkhttp://www.w3.org/1999/xlink defs path idpath1 dM75,20 a1,1 0 0,0 100,0 / /defs text x10 y100 stylefill:red; textPath xlink:href#path1 I love SVG I love SVG /textPath /text /svg 继承关系SVGTextPathElement - SVGTextContentElement - SVGGraphicsElement - SVGElement - Element - Node - EventTarget - Object滤镜和渐变以及SVG DOM的操作后续补充
3. 元素的公共属性
元素的属性描述示例stroke功能描边颜色 svg xmlnshttp://www.w3.org/2000/svg version1.1 g fillnone strokeblack stroke-width6 path stroke-linecapbutt dM5 20 l215 0 / path stroke-linecapround dM5 40 l215 0 / path stroke-dasharray20,10,5,5,5,10 dM5 60 l215 0 / /g /svg storke-width功能描边宽度stroke-linecap 功能描边的线帽 取值butt | round | square stroke-dasharray 功能创建虚线描边 取值实线段长度虚线段长度实线段长度...... fill 功能填充颜色
4. HTML中引用SVG
引用svg的方式优点缺点embed srccircle.svg typeimage/svgxml /所有主流浏览器均支持允许使用脚本 不推荐在HTML4和XHTML使用 HTML5允许使用 iframe srccircle.svg/iframe所有主流浏览器均支持允许使用脚本 不推荐在HTML4和XHTML使用 HTML5允许使用 object datacircle.svg typeimage/svgxml/object所有主流浏览器均支持且支持HTML4/XHTML/HTML5不允许使用脚本HTML直接嵌入svg元素 !DOCTYPE html html body svg xmlnshttp://www.w3.org/2000/svg version1.1 circle cx100 cy50 r40 strokeblack stroke-width2 fillred / /svg /body /html
5. 总结 仅图形而言较为复杂的是path需要学会使用二次贝塞尔曲线、三次贝塞尔曲线、连续二次贝塞尔曲线、连续三次贝塞尔曲线就图形效果而言应该是滤镜和渐变的使用。后续为大家补充滤镜和渐变以及SVG DOM的操作、绑定事件处理程序。
下一篇【Web2D/3D】Canvas第三篇-CSDN博客
注以上如有不合理之处还请帮忙指出大家一起交流学习~
