svg 上的事件不会冒泡

动画：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Mask：蒙版，支持透明度；

Clip：裁剪；

svg做响应式图片（img标签）有一个好处是可以使用媒体查询（相当于元素大小查询）

svg 上的 viewBox 代表svg 内的坐标以及svg的实际图像区域，不能随便改动。

// 作用域svg中的css 属性的坐标也使用viewBox 坐标系

// SVGElement.getBBox() 获取viewBox中自己的位置大小

width/height 代表显示大小，object-fit 并不能改变viewBox区域

// , +,，,,, 形状（椭圆），艺术文本（,描边，填充 渐变，字体设置）...

// 两球融合滤镜 https://www.zhangxinxu.com/study/201712/gooey-ball-drag.html

// 没有区域文本的概念， 区域文本只能靠css 的 shape-* 属性来完成。

可访问性：title 和 desc 元素；屏幕阅读：svg元素上添加role="img"

// 内联svg（不包括use） role改成"group"

// 兼容旧版 svg元素添加 aria-labelledby='titleId descId'

// 装饰性： aria-hidden="true"

css svg属性家族 https://www.w3.org/TR/SVG/propidx.html

fill: none;

stroke-width: 6;

stroke-linejoin: round;

stroke-dasharray: 70, 330;/*虚线设置，类似AI*/

stroke-dashoffset: 0; // 利用他们两可以做生长动画 //也可以用 css or svg（SMIL chrome45 不推荐） 的 motion 属性

clip-path

.svg-3:hover path { // chrome 支持

d: path("M2,2 Q2,8 8,8");

}

svg 属性，style中可以设置的css就可以设置

mask

vector-effect: non-scaling-stroke;