svg知识点小结
此文用于记录鄙人对svg的粗浅理解,跟svg相关的任何知识将持续在此更新
通用属性
- class
- style
显性元素
元素名 | 描述 | 主要属性 | reference |
---|---|---|---|
rect | 矩形 | x\y\width\height… | https://www.w3.org/TR/SVG/shapes.html#RectElement |
circle | 圆形 | cx\cy\r… | https://www.w3.org/TR/SVG/shapes.html#CircleElement |
ellipse | 椭圆 | cx\cy\rx\ry… | https://www.w3.org/TR/SVG/shapes.html#EllipseElement |
line | 线 | x1\y1\x2\y2… | https://www.w3.org/TR/SVG/shapes.html#LineElement |
polyline | 线集-开放 | points… | https://www.w3.org/TR/SVG/shapes.html#PolylineElement |
polygon | 线集-封闭 | points… | https://www.w3.org/TR/SVG/shapes.html#PolygonElement |
text | 文本 | x\y\dx\dy\textLength… | https://www.w3.org/TR/SVG/text.html#TextElement |
tspan | inline文本 | x\y\dx\dy\textLength… | https://www.w3.org/TR/SVG/text.html#TSpanElement |
image | 图片 | x\y\width\height\xlink:href… | https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag |
非显性元素
路径指令
除基本操作不区分大小写,其他大写表示绝对位移,小写表示相对位移
- 基本操作
- M:移动,(x,y)+
- Z:闭合
- 直线
- L\l:lineto,(x,y)+
- H\h:horizontal lineto (x)+
- V\v:vertical lineto (y)+
- 弧线
- A\a:a segment of an ellipse (rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y)+ 其中x-axis-rotation是弧线的转角度数,large-arc-flag, sweep-flag决定了从相交椭圆中选择哪条圆弧。见下图
- A\a:a segment of an ellipse (rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y)+ 其中x-axis-rotation是弧线的转角度数,large-arc-flag, sweep-flag决定了从相交椭圆中选择哪条圆弧。见下图
- 二次贝塞尔曲线
- Q\q:quadratic (x1,y1 x,y)+
- T\t:smooth quadratic,(x,y)+ 加了对称点的Q,需跟在Q后面,否则降级成直线
- 三次贝塞尔曲线
- C\c:cubic (x1,y1 x2,y2 x,y)+
- S\s:smooth cubic,(x2,y2 x,y)+ 加了对称点的C,需跟在C后面,否则降级成Q
CSS主要属性清单
最常用的fill和stroke,完整列表参见svg styling
fill
- fill
- fill-opacity
- fill-rule nonzero|evenodd 判断是填充的算法规则:在任意点延伸的一条穿过图形的线与图形路径的相交点的正交反交(正交标记1,反交标记-1)数量来判断,正交:顺时针相交,反交:逆时针相交
- nonzero 表示正反交数量为非0的时候填充,0的时候不填充。如图
- evenodd 表示正反交数量为奇数的时候填充,偶数的时候不填充。如图
- nonzero 表示正反交数量为非0的时候填充,0的时候不填充。如图
stroke
- stroke
- stroke-width
- stroke-opactity
- stroke-linecap butt|round|square 如图
- stroke-linejion miter|round|bevel bevel的算法略诡异,待了解path实现细节 如图
- stroke-dasharray
定义描边虚线阵列,包含虚线粗细及间隔的设置,参数多样 - stroke-dashoffset 虚线起始偏移量,移动在dasharray上的视觉起点
利用足够大的dasharray和dashoffset来实现svg路径描边动画
兼容性
元素名 | 描述 | 主要属性 | reference | 兼容性描述 |
---|---|---|---|---|
tref | 引用文本 | xlink:href… | https://www.w3.org/TR/SVG/text.html#TRefElement | chrome不支持, 考虑到文本复用的应用场景几乎没有,窃以为chrome的不支持可以理解 |
总结
svg相关的知识点比较琐碎,涉及到的图层叠加、混合、填充等实现细节和算法规则还有待进一步了解。