SVG 使用详解

2021-12-01 web html

简介

支持常见的基本形状：

  • polygon 多边形。
  • polyline 多边线。
  • path 可以绘制自定义图像。

使用时对应的坐标如下。

grid

高阶组件

支持在 defs 中添加一些预定义的内容，例如 Javascript、Group 等。

Group

通过 g 添加，可以整体修改这个组内元素的属性，例如颜色、大小等，还支持通过 defs+use 或者 symbol 方式复用。

Path

可以绘制任意的形状和曲线，如下仅列举部分命令。

M x,y  MoveTo 移动到 (x,y) 位置
L m,n  LineTo 从当前位置画直线到 (m,n)
Z m,n  ClosePath 上述的 LineTo 可能在终点没有闭合

另外，上述 M/L 使用绝对坐标，而 m/l 使用相对坐标。

Filter

类似于 CSS 中的滤镜，用来创建一些复杂的效果，需要在 <defs> 中定义 <filter> 标签。

对于 svgwrite 来说，定义了之后，在其它组件中可以通过 filter=xxx.get_funciri() 方式引用，此时会生成 url(#ID) 内容，其它还有 get_iri() 对应 #ID，以及 get_id() 就是组建自动生成或者指定的 ID 了。

常用技巧

文本右对齐。

<text x="100%" y="50" text-anchor="end" font-size="35" file="blue">Hello</text>

参考

  • SVG 官方文档，包括了基本概念、常见示例等。