1. svg 概述
SVG 是对图像的描述、体积小、放大不失真
SVG 文件可以用 JavaScript 和 CSS 进行操作。
2. svg 使用
2.1 直接插入网页，成为 DOM 的一部分
<!DOCTYPE html> <html> <head></head> <body> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" > <circle id="mycircle" cx="400" cy="300" r="50" /> <svg> </body> </html>
2.2 写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页
<img src="circle.svg"> <object id="object" data="circle.svg" type="image/svg+xml"></object> <embed id="embed" src="icon.svg" type="image/svg+xml"> <iframe id="iframe" src="icon.svg"></iframe>
2.3 CSS bg
.logo {
background: url(icon.svg);
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="256px" height="256px" viewBox="0 0 128 128" xml:space="preserve"><script type="text/ecmascript" xlink:href="//preloaders.net/jscripts/smil.user.js"/><g><path fill="#199348" fill-opacity="1" d="M116.7 66.28a52.86 52.86 0 0 1-1 8.18l9.8 7.57-1.78 4.67-1.77 4.67-12.36-.82a52.87 52.87 0 0 1-4.7 6.7L110 108.5l-3.75 3.3-3.75 3.32L92 108.67a52.6 52.6 0 0 1-7.45 3.9l-.66 12.3-4.87 1.2-4.86 1.2-6.38-10.66q-1.9.2-3.88.2-2.15 0-4.25-.14l-6.3 10.64-4.84-1.2-4.85-1.2-.7-12.43a52.6 52.6 0 0 1-6.7-3.5l-10.6 6.64-3.75-3.3-3.76-3.3 5.05-11.4a52.88 52.88 0 0 1-4.73-6.73l-12.34.9-1.8-4.66-1.8-4.67 9.7-7.67a52.8 52.8 0 0 1-1-8.05l-11.4-5 .56-4.95.54-4.97 12.26-2.3a52.37 52.37 0 0 1 2.94-7.83L8.4 32l2.8-4.14 2.8-4.14 12 3.68a53.06 53.06 0 0 1 6-5.33L29.57 9.8l4.4-2.37 4.43-2.35 8.95 8.86a52.4 52.4 0 0 1 8-1.98L59 0h10l3.66 11.96a52.4 52.4 0 0 1 7.8 1.9L89.26 5l4.42 2.3 4.43 2.34-2.3 12.27a52.98 52.98 0 0 1 6.2 5.5l11.9-3.7 2.9 4.1 2.84 4.1-7.8 9.8a52.34 52.34 0 0 1 2.86 7.5l12.3 2.17.6 4.96.57 4.95zM41 64a23 23 0 1 0 23-23 23 23 0 0 0-23 23z"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="27.69 64 64" dur="900ms" repeatCount="indefinite"></animateTransform></g></svg>
2.4 转为 BASE64 编码，然后作为 Data URI 写入网页
<img src="data:image/svg+xml;base64,[data]">
3. svg 基础
3.1 基本使用
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>3.2 使用描述图像的一部分 指定viewBox属性
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度 （视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍）
3.3 常用标签
3.3.1 圆 <circle>
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
<circle cx="90" cy="50" r="25" class="red" />
<circle cx="150" cy="50" r="25" class="fancy" />
</svg><circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。
坐标都是相对于<svg>画布的左上角原点。
3.3.2 直线 <line>
<svg width="300" height="180">
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-5" />
</svg>
3.3.3 折线 <polyline>
<svg width="300" height="180"> <polyline points="3,3 30,28 3,53" fill="none" stroke="black" /> </svg>
<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
3.3.4 <rect> 矩形
<svg width="300" height="180">
<rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>
3.3.5 <ellipse> 椭圆
<svg width="300" height="180">
<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg>
<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）
；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。
3.3.6 <polygon> 多边形
<svg width="300" height="180">
<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg>
<polygon>的points属性指定了每个端点的坐标，
横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
3.3.7 <path> 路径
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径
3.3.8 <text> 文本
<svg width="300" height="180">
<text x="50" y="25">Hello World</text>
</svg>
<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。
文字的样式可以用class或style属性指定。
3.3.9 <use> 复制一个形状
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。
另外，还可以指定width和height坐标
3.3.10 <g> 将多个形状组成一个组（group），方便复用。
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
3.3.11 <defs>标签用于自定义形状，它内部的代码不会显示，仅供引用
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
3.3.12 <pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
3.3.13 <image>标签用于插入图片文件
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>
3.3.14 <animate>标签用于产生动画效果。
<svg width="500px" height="500px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
3.3.15 变形 <animateTransform>
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
</rect>
</svg>
<animateTransform>的效果为旋转（rotate），
这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。
from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；
to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
4. js 操作
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; } circle { stroke-width: 5; stroke: #f00; fill: #ff0; } circle:hover { stroke: #090; fill: #fff; } svg{ border:1px solid red; } </style> </head> <body> <svg id="mysvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet"> <circle id="mycircle" cx="100" cy="100" r="50" /> </svg> <script> var mycircle = document.getElementById('mycircle'); mycircle.addEventListener('click', function (e) { console.log(this,e); var r=this.getAttribute('r')=='60'?'50':'60'; mycircle.setAttribute('r', r); }, false); </script> </body> </html>
4.1 路径文本
<svg width="800" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none" /> <text style="font-size:20px;"> <textPath xlink:href="#p1">落红不是无情物，一枝红杏出墙来，恰似一江清水向东流。</textPath> </text> </svg>
5.参考网址
6.好玩的应用