# SVG

<svg width="200px" height="200px" viewBox="0 0 200 200">
  <line x1="40" y1="20" x2="80" y2="20" style="stroke-width: 2; stroke: black;"/>
</svg>

# SVG 基础

# 画笔

画笔颜色 (stroke)

  • 可以通过 keyword 指定:stroke: black;,keyword 列表见规范 (opens new window)
  • 还可以通过 stroke: #9f9; stroke: #f8f8f8; stroke: rgb(255, 255, 255) 指定

画笔粗细 (stroke-width)

虚线 (stroke-dasharray)

# 基本形状

线段、矩形、圆角矩形、圆和椭圆、多边形、折线

# 坐标系统

# 文本

# SVG 进阶

# 路径

# 图案和渐变

# 滤镜

# SVG 高级内容

# SVG 动画

# SVG 交互

# 使用 JS 创建 SVG