1.简单示例 矩形、圆、文字

SVG

2. 基本形状1：矩形/圆角矩形/圆/椭圆/线

3. 基本形状2：折线/多边形/路径/贝塞尔曲线

4. 路径：弧线/扇形

5. 填充和描边

  • fill-opacity 和 stroke-opacity 控制填充和描边的不透明度。也可以用rgba
  • 描边与canvas线条样式类似，有stroke-width、stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-dasharray 和 stroke-dashoffset
  • 我们是可以通过 CSS 来定义样式的，只不过你要把 background-color、border 改成 fill 和 stroke

    • 6.渐变- 图案

    7. 渐变 spreadMethod 属性

    8. 文本 text/tspan/textPath

    Hello World! rotate字符旋转45度 Hello SVG! this is blod and red 这是一段文字，围绕三次贝塞尔曲线环绕

    9.变换: 平移、旋转、缩放、斜切

    10. 裁剪/ 反向裁剪/遮罩/配合CSS background使用

    11. 与css配合使用

  • 通过设置svg元素宽高进行缩放
  • 通过css选择器和fill、stroke修改SVG路径样式