SVG基础语法及使用

背景

前端开发过程中经常会接触SVG格式的图像，且相较于其他格式图像，SVG为代码形式。前端开发人员若掌握一些基本的SVG语法，可以在绘制一些页面上的图形时具有更高的效率，更少且可读性更高的代码。

概述
  • SVG意为可缩放矢量图形
  • SVG使用XML格式定义图像
  • SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG是W3C推荐标准
特征
  • 相比JPEG、GIF等图像格式，尺寸更小，可伸缩性更强
  • 可伸缩，不因尺寸影响图形质量
  • 文本可选且可搜索
  • 可以与JavaScript技术一起运行
  • 是纯粹的XML(XML是什么)
SVG元素
SVG根元素

<svg></svg>

  • 常用属性
    1. width
    2. height
SVG矩形

<rect/>

  • 常用属性
    1. width
    2. height
    3. fill 矩形的填充颜色
    4. style css属性
    5. stroke 矩形边框颜色【stroke详情】
      (stroke详情)
    6. rx ry 矩形圆角
  • 示例
<svg width="500" height="100">
  <rect x="10" y="10" width="150" height="50" rx="20" ry="20" fill="orange" stroke="red" />
</svg>
SVG圆形

<circle/>

  • 常用属性
    1. cx cy 圆点坐标，若省略则为 (0, 0)
    2. r 圆的半径
  • 示例
<svg width="500" height="100">
  <circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="orange" />
</svg>
SVG椭圆

<ellipse/>

  • 常用属性
    1. rx ry 椭圆的水平半径与垂直半径
  • 示例
<svg width="500" height="100">
  <ellipse cx="100" cy="50" rx="50" ry="30" stroke="red" stroke-width="2" fill="orange" />
</svg>
SVG直线

<line/>

  • 常用属性
    1. x1 y1 直线的开始位置坐标
    2. x2 y2 直线的结束位置坐标
  • 示例
<svg width="500" height="100">
  <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="3" />
</svg>
SVG多边形

<polygon/>

  • 常用属性
    1. points 组成多边形各个点的坐标
  • 示例
<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" fill="orange" stroke="red" />
</svg>
SVG多线段

<polyline/>

  • 常用属性
    1. points 线段各节点坐标
  • 示例
<svg width="500" height="100">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="#fff" stroke="red" />
</svg>
SVG路径

<path/>

  • 常用属性
    1. d 轨迹
      M = moveto
      L = lineto
      H = horizontal lineto
      V = vertical lineto
      C = curveto
      S = smooth curveto
      Q = quadratic Bézier curve
      T = smooth quadratic Bézier curveto
      A = elliptical Arc
      Z = closepath
  • 示例
<svg width="500" height="200">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>
SVG文本

<text></text>

  • 常用属性
    1. x y 文字位置
    2. transform 旋转、缩放、倾斜、平移
  • 示例
<svg width="500" height="100">
  <text x="10" y="30" fill="red" transform="rotate(30 20,40)" style="font-size: 30px; font-weight: 800;">study SVG</text>
</svg>
study SVG
stoke属性
  • stroke
    定义一条线，文本或元素轮廓颜色
  • stoke-width
    定义了一条线，文本或元素轮廓厚度
  • stroke-linecap
    定义不同类型的开放路径的终结
<svg width="500" height="100">
  <g fill="none" stroke="red" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>
  • stroke-dasharray
    用于创建虚线
<svg width="500" height="100">
  <g fill="none" stroke="red" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>
其他技巧
g标签的使用
  • 改变位置
    g 标签仅仅作为组合其他svg标签的容器，其本身无法设置x,y等属性，若需要改变该容器位置，可以考虑使用transform: translate写法
<g transform="translate(15, 15)">...</g>
  • 获取宽高
    g标签无法通过offsetWidth/offsetHeight、ClientWidth/ClientHeight获取元素宽高(获取结果为undefined)。即普通的DOM获取方法不适用于svg元素。
    可以使用getBoundingClientRect()方法
document.getElementById('g1').getBoundingClientRect()

获取结果为一个对象，里面包含元素宽高等各项信息。

svg标签的嵌套使用

  • 问题描述
    实际使用svg绘图时会遇到以下问题：当对svg标签内的元素使用百分比进行定位或设置长度时，此百分比均是基于svg画布本身大小，而非其父级元素大小。但部分情况下需要以局部为总体进行百分比布局。

  • 解决方法
    在svg标签内新增svg标签嵌套处理，改变子元素对应的画布，并改变内层svg画布的位置与大小以满足需求。

  • 注意事项
    由于svg标签空间范围外的元素会被隐藏，因此需要注意每一层画布的大小及位置，防止部分元素消失的问题。

实际运用

将以上基本的svg元素运用到实际页面的图形绘制开发中，例如在甘特图中时间轴、进度条等样式布局的开发，详细内容：
【个人甘特图组件开发】

参考资料

【MDN】
【菜鸟教程】

原文地址

【个人博客】