SVG

概述

简介

使用方式

  1. 使用 <svg> 标签，将代码直接写在 HTML 文档中，使其成为 DOM 的一部分，这样可以直接用 JavaScript 和 CSS 进行操作。
  2. 将代码写在独立的 .svg 文件中，然后使用 <iframe> <img> 等标签插入 HTML 文档中。
  3. 在 CSS 中也可以使用 .svg 文件。
  4. .svg 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
<svg viewBox="...">...<svg>
<iframe src="icon.svg"></iframe>
<img src="icon.svg">
<img src="data:image/svg+xml;base64,[data]">
.logo {
    background: url(icon.svg);
}

语法

基础语法

绘制形状

标签 说明 属性
<svg> 顶层标签
  1. width height 指定 SVG 图像在 HTML 元素中所占据的宽度和高度。不指定时默认 300*150 像素。
  2. viewBox 指定视口左上角的横坐标和纵坐标、宽度和高度。可用来展示 SVG 图像的一部分，视口会放大去适配 SVG 图像的大小。如果不指定 width 和 height，只指定 viewBox，则相当于指定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
<circle> 圆形
  1. cx cy 圆心的横坐标和纵坐标。
  2. r 圆的半径。
<ellipse> 椭圆形
  1. cx cy 椭圆中心的横坐标和纵坐标。
  2. rx ry 椭圆横向轴和纵向轴的半径。
<rect> 矩形
  1. x y 矩形左上角的横坐标和纵坐标。
  2. width height 矩形的宽度和高度。
<line> 直线
  1. x1 y1 起点的横坐标和纵坐标。
  2. x2 y2 终点的横坐标和纵坐标。
<polyline> 折线
  1. points 指定每个端点的坐标。横坐标与纵坐标之间用逗号分隔，点与点之间用空格分隔。
<polygon> 多边形（不少于三个边）
  1. points 指定每个端点的坐标。横坐标与纵坐标之间用逗号分隔，点与点之间用空格分隔。
<path> 路径

  1. d 绘制顺序。它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。大写表示绝对定位，小写表示相对定位。

    1. M 移动到（moveto）
    2. L 画直线到（lineto）
    3. Z 闭合路径

See the Pen SVG basic by jianhee (@jianhee) on CodePen.

绘制动画

标签 说明 属性
<animate> 动画效果，但是不支持变形
  1. attributeName 发生动画效果的属性名。可以在多个属性上面定义动画。
  2. from 单次动画的初始值。
  3. to 单次动画的结束值。
  4. dur 单次动画的持续时间。
  5. repeatCount 动画的循环模式。
<animateTransform> 变形的动画
  1. type 变形的类型，比如 rotate。
  2. begin 开始时间。
  3. from to 这时属性值有三个数字，第一个是角度值，第二个和第三个是旋转中心的坐标。
  4. 其余属性同上。

See the Pen SVG animate by jianhee (@jianhee) on CodePen.

插入图像

标签 说明 属性
<text> 插入文本
  1. x y 文本区块基线起点（左下角）的横坐标和纵坐标。
<image> 插入图片文件
  1. x y 图片左上角的横坐标和纵坐标。
  2. width height 图片的宽度和高度。
  3. xlink:href 图片的地址。

See the Pen SVG img by jianhee (@jianhee) on CodePen.

复用图像

标签 说明 属性
<defs> 这个标签内的图案，默认不会显示，只有在引用时才会显示。
<g> 这个标签用于将多个图案组成一个组，方便复用。
<use> 这个标签用于复制一个或者一组图案。
  1. x y width height 等。
  2. href 指定所要复制的节点。
<pattern> 这个标签用来被别的区域引用，以标签为单位平铺该区域，展示标签内的图案。
  1. x y width height 等。
  2. patternUnits 定义 pattern 的坐标系统。默认值 objectBoundingBox 会对图案的单位进行缩放，设置为 userSpaceOnUse 不会缩放。
  3. 被引用时将节点名称写在 fill 属性的 url 中。

See the Pen SVG copy by jianhee (@jianhee) on CodePen.