SVG 初学

svg 上的事件不会冒泡

Mask：蒙版，支持透明度；

Clip：裁剪；

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

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

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

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

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

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

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

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

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

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

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

fill: none;

stroke-width: 6;

stroke-linejoin: round;

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

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

mask 可以直接使用图片，有半透明度遮罩（firefox做html元素的mask需要全部放到svg中）

clip-path

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

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

}

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

mask

= "

url(#m-text)

" 需要mask元素

clip-path

url(#cp-text)

" 需要clip-path元素,显示路径内的

vector-effect: non-scaling-stroke;