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;