svg标签详解

svg简介

SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics.
这是MDN英文文档对svg的介绍。

svg支持css,这一点有效的将图形和样式区分开。

svg的应用：
1、绘图
2、动画

svg标签用法

svg元素可以通过、或者嵌入网页之中，但是我们这里推荐使用,
兼容性比较好。

svg标签属性

fill: 填充色 | url(id)这里主要是引用渐变色作为背景
stroke: 线条的颜色
stroke-width: 线条的宽度
stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ，round和square会影响线条的长度
opacity: 不透明度 0~1
fill-rule: nonzero (非零环绕原则)evenodd
stroke-dasharray: 创建虚线数组 x,y,z,… (长度，间隔，长度，间隔，。。。。)
stroke-dashoffset: 偏移
filter: url(id) 添加滤镜

clipPath-裁剪

能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的，属性clip-path可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。

g-分组

g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。

拷贝

(x, y): 克隆对象的左上角坐标
width: 克隆对象的宽度
height: 克隆对象的高度
xlink:href 引用克隆对象