> SVG（Scalable Vector Graphics）可伸缩的向量图形，是基于可扩展标记语言XML（Extensive Markup Language），用于描述二维矢量图形的一种图形格式。 浏览器支持：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial ## 一、SVG可以由以下方式使用 同一级目录下有两个文件 > test.html > test.svg test.svg ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="25" stroke="black" stroke-width="2" fill="red" /> </svg> ~~~  方式1： ~~~ <embed src="test.svg" type="image/svg+xml" /> ~~~ 方式2： ~~~ <img src="test.svg" alt=""> ~~~ 方式3： ~~~ <object data="test.svg" type="image/svg+xml"></object> ~~~ 方式4： ~~~ <iframe src="test.svg"></iframe> ~~~ 方式5： ~~~ <a href="test.svg">svg</a> ~~~ ## 二、SVG的一些预定义形状 1、矩形rectangle（长、宽，这是使用了内联style来定义svg样式） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="100" height="60" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  引申圆角矩形 ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect rx="20" ry="20" width="100" height="60" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  2、圆形circle（上面已有示例） 3、椭圆ellipse（圆心点、x轴半径、y轴半径） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="100" cy="100" rx="60" ry="30" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg> ~~~  4、直线line（点1、点2） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2"/> </svg> ~~~  5、多边形polygon（多点空格隔开） ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> ~~~  6、折线polyline（多点空格隔开） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" /> </svg> ~~~  7、路径path（d：draw/define） ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M50 0 L50 50 L10 50 Z" /> </svg> ~~~  路径参数 | 参数 | 描述 | | --- | --- | | 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 | 8、文本text ~~~ <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="10" y="50" fill="#f00">Hello World!</text> </svg> ~~~  ## 三、viewport、viewbox、preserveAspectRatio 1、viewport也就是svg的宽高 如果不设置width、height，浏览器也会自带默认宽高  如果宽高小于形状的宽高，那么就只能开到svg 可视宽高viewport的内容  2、viewbox（x y width height）这个有点像淘宝图片放大器，下面是放大1.5倍的效果(120 / 80 = 1.5) 这个算法不是固定的，原则就是先按比例大的来算 ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 80 60" version="1.1"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  viewbox的宽高越大实际效果越小，成反比的。 再来个缩小居中效果（120 / 240 = 0.5） ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 240 35" version="1.1"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  viewbox 中的4个参数都太随性了，一时不好讲清楚，这个是多试试，然后就是在项目中要谨慎使用 3、preserveAspectRatio(xMidyMid meet) ~~~ <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewbox="0 0 120 60" preserveAspectRatio="xMidYMin slice" version="1.1" style="border: 1px solid #f00;"> <rect width="40" height="30" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> ~~~  参数1 | 参数 | 描述 | | --- | --- | | xMin | viewport和viewBox左边对齐 | | xMid | viewport和viewBox x轴中心对齐 | | xMax | viewport和viewBox右边对齐 | | YMin | viewport和viewBox上边缘对齐。注意Y是大写。 | | YMid | viewport和viewBox y轴中心点对齐。注意Y是大写。 | | YMax | viewport和viewBox下边缘对齐。注意Y是大写。 | 参数2 | 参数 | 描述 | | --- | --- | | meet | 保持纵横比缩放viewBox适应viewport | | slice | 保持纵横比同时比例小的方向放大填满viewport | | 无 | 扭曲纵横比以充分适应viewport | 这三个viewport最好理解，viewbox是与viewport配合使用的，而preserveAspectRatio又是与viewbox配合使用的。但viewbox和preserveAspectRatio不好理解，需要大量的在项目中使用，才能理解透彻，这里只是给个引子。。