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区域
// <path>, <symbol>+<use>,<pattern>，<filter>,<clipPath>,<mask>, 形状（椭圆），艺术文本（<textpath>,描边，填充 渐变，字体设置）...
// 两球融合滤镜（模糊再锐化） https://www.zhangxinxu.com/study/201712/gooey-ball-drag.html
// 复制多份 feMerge https://www.zhangxinxu.com/wordpress/2024/05/svg-femerge-clone-dom-css-style/
// 没有区域文本的概念， 区域文本只能靠css 的 shape-* 属性来完成。
可访问性：title 和 desc 元素；屏幕阅读：svg元素上添加role="img"
// 内联svg（不包括use） role改成"group"
// 兼容旧版 svg元素添加 aria-labelledby='titleId descId'
// 装饰性： aria-hidden="true"
viewport，viewbox，preserveAspectRatio
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 属性
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;
