参考教程

如有疏漏和错误，请大家多多指教！！！

容器

<svg>

容器标签，要绘制图形的话相当于需要声明一个绘制区域。

svg的坐标系统，以画布svg的左上角为原点，x轴正方向向右，y轴正方向向下。

主要属性

width 设置svg画布的宽，默认单位为px，可以设置rem、em、百分比。
height 设置svg画布的高，默认单位为px，可以设置rem、em、百分比。
viewBox viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。一般这样设置 viewBox="0 0 4 3"，如果都设置了0，则元素不会展示。理解SVG viewport,viewBox,preserveAspectRatio缩放
preserveAspectRatio 这个属性结合到viewBox来使用。

注意事项

<svg> 的背景颜色不能通过 fill 去设置，只能通过 style 的 background-color 属性来设置。
形状相关的元素，比如 rect、circle这些，填充颜色就只能通过 fill 来设置，比如这样

<rect fill="#fff"></rect>
// 或者
<rect style="fill:#fff"></rect>

<defs>

svg允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加svg内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用 <use> 元素呈现这些元素。

// 来自MDN示例代码
<svg width="80px" height="30px" viewBox="0 0 80 30"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
        fill="url(#Gradient01)"  />
</svg>

主要属性

暂无特别的主要属性

<g>

元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过 <use> 元素来引用它们。

可以把 <g> 标签理解为用来分组，作为一个容器。

主要属性

暂无特别的主要属性

<use>

这个标签可以引用 <defs> 里面声明好的元素。

// 来自MDN示例代码
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

主要属性

x x轴方向的距离
y y轴方向的距离
height
width
xlink:href 引用的资源对应的URI，一般使用id，SVG 2中该属性已不推荐，建议使用 href 代替

<script>

可以在这个标签内使用JS代码

// 示例来自MDN
<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    // <![CDATA[
    function change(evt) {
      var target = evt.target;
      var radius = target.getAttribute("r");

      if (radius == 15) {
        radius = 45;
      } else {
        radius = 15;
      }

      target.setAttribute("r",radius);
   }
   // ]]>
  </script>

  <circle cx="50" cy="50" r="45" fill="green"
          onclick="change(evt)" />
</svg>

<style>

可以在这个标签内定义样式

// 示例来自MDN
<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>

形状

<rect>

绘制一个矩形

<rect width="100" height="100" fill="#FFC857" x="20" y="20" rx="100" ry="100"/>

主要属性

width 矩形宽度，默认解析单位为px，可以设置rem、em、百分比。
height 矩形高度，默认解析单位为px，可以设置rem、em、百分比。
x 以svg为画布，左上角为原点，在x轴方向的距离，正数为x轴正方向，负数为x轴负方向，默认单位为px，可以设置rem、em、百分比。
y 以svg为画布，左上角为原点，在y轴方向的距离，正数为y轴正方向，负数为y轴负方向，默认单位为px，可以设置rem、em、百分比。
rx 用于定义x轴向的圆角半径尺寸。默认解析单位px，可选择百分比。
ry 用于定义y轴向的圆角半径尺寸。默认解析单位px，可选择百分比。

注意事项

rx与ry支持动画。
当rx与ry的值等于x与y的值时，绘制出来的就是圆形。
类似圆柱的柱状图：

<rect width="80" height="150" fill="#C5283D" x="140" y="20" rx="100" ry="15"></rect>

<ellipse>

绘制一个椭圆（圆）

<ellipse cx="350" cy="100" rx="100" ry="80" fill="#255F85"></ellipse>

主要属性

cx 定义一个中心点的 x 轴坐标。单位px或百分比。
cy 定义一个中心点的 y 轴坐标。单位px或百分比。
rx 用于定义x轴向的圆角半径尺寸。默认解析单位px，可选择百分比。
ry 用于定义y轴向的圆角半径尺寸。默认解析单位px，可选择百分比。

<circle>

绘制一个圆。

<circle cx="600" cy="120" r="100" fill="#481D24"></circle>

主要属性

cx 定义一个中心点的 x 轴坐标。单位px或百分比。
cy 定义一个中心点的 y 轴坐标。单位px或百分比。
r 定义半径

<line>

绘制一条线

<line x1="750" y1="100" x2="850" y2="200" stroke="#A8BCA1" stroke-width="3"></line>

主要属性

x1 直线起点的 x 轴坐标
y1 直线起点的 y 轴坐标
x2 直线终点的 x 轴坐标
y2 直线终点的 y 轴坐标

注意事项

<line> 的颜色不在使用 fill 属性来设置，而是使用 stroke 来设置颜色。
也可以使用 style 来收拢样式，如下写法

<line x1="750" y1="100" x2="850" y2="200" style="stroke:#A8BCA1;stroke-width:3;"></line>

<polygon>

定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点。

<polygon points="20,200 100,300 20,350" fill="#2FE6DE"></polygon>

主要属性

points 定义了用来画一个 <polyline> 元素元素的点的数列

<polyline>

用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状，最后一点不与第一点相连。

<polyline points="100,200 200,300 100,400 200,500" stroke="#D741A7" stroke-width="4" fill="#fff"></polyline>

主要属性

points 定义了用来画一个元素元素的点的数列

<path>

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

主要属性

d 该属性定义了一个路径

<title>

SVG绘图中的每个窗口元素或图形元素都可以提供一个title描述性字符串，该描述只能是纯文本。

通常title元素必须是它的父元素的第一个子元素。注意，只有当title是它的父元素的第一个子元素的时候，那些编译器才会把title显示为一个提示冒泡。

<rect x="10" y="10" width="200" height="50" fill="red"><title>this is rect</title></rect>

当鼠标悬浮在矩形上时，就会冒泡提示title里面的内容。对title的style属性设置字体颜色无效。

主要属性

无特别的主要属性

文本

<text>

定义了一个由文字组成的图形。

<text x="10" y="20">SVG Text Example</text>

主要属性

x x轴方向的距离。
y y轴方向的距离。
dx x方向的偏移量。
dy y方向的偏移量。
text-anchor 文本锚点属性被用来描述该文本与所给点的对齐方式 (开头、中间、末尾对齐)，属性值：start | middle | end | inherit。
textLength 指定文本将绘制到的空间的宽度，相当于限制文本绘制的区域大小，属性值：百分比 | 数字。
lengthAdjust lengthAdjust属性控制文本如何被拉伸成textLength属性定义的长度。属性值：spacing | spacingAndGlyphs

<tspan>

在 <text> 标签里面创建子文本，类似于 HTML 里面的 <span>。

<text x="10" y="20">SVG <tspan>Text</tspan> Example</text>

主要属性

除开没有 text-anchor 属性，其他与上面 <text> 描述的属性一致。

<textPath>

沿指定的path来绘制文本

// 来自MDN示例
<!-- 使用defs标签可以隐藏path绘制的颜色，比如下面指定path为red，使用defs包裹后就看不到红色了 -->
<defs>
<path id="MyPath" fill="none" stroke="red"
      d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
</defs>

<text>
  <textPath href="#MyPath">
    Quick brown fox jumps over the lazy dog.
  </textPath>
</text>

主要属性

href 需要选用的path对应的标识（一般是id）。
path 未指定href时需要指定对应的路径数据。
method 这个暂时没搞明白，属性值有：align | strench。
side 这个暂时没搞明白，属性值有：left | right。
startOffset 文本的开头应该与路径的开头偏移多远。
textLength 同
lengthAdjust 同

渐变

<linearGradient>

定义线性渐变，用于图形元素的填充或描边。

// 来自MDN示例
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)"
          x="10" y="10" width="100" height="100"/>
</svg>

主要属性

gradientUnits 属性的值：userSpaceOnUse | objectBoundingBox，这个应该是表明渐变的基准坐标已谁为准，userSpaceOnUse表示已当前用户坐标系统为准，objectBoundingBox表示以元素的边界框建立坐标，同时结合gradientTransform进行转换。
gradientTransform 定义渐变的形状变换，比如使用skewX和translate这些函数来进行变换。目前没怎么搞懂这个属性，估计这个属性的取值应该就是css里面transform对应的取值。
x1
y1
x2
y2

x1 y1 x2 y2这个表示渐变的起始位置到结束位置。

spreadMethod 决定如何在渐变的定义边缘之外填充形状。属性的取值：pad | reflect | repeat

<stop>

定义渐变上的颜色坡度，适用于 <linearGradient> 和 <radialGradient>。

主要属性

offset 颜色起始或结束时的偏移量，使用百分比
stop-color 起始或结束时渐变的颜色。
stop-opacity 起始或结束时渐变的透明度。

主要属性对应的图示

示例代码

<defs>
  <linearGradient id="MyGradient">
      <stop offset="0%" stop-opacity="1" stop-color="green"/>
      <stop offset="100%" stop-opacity="1" stop-color="red"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="100" height="20"/>

gradientUnits

设置为：userSpaceOnUse

设置为：objectBoundingBox（默认值）

spreadMethod 设置为：pad（默认值）

注意：这个需要结合到x1 x2 y1 y2坐标一起使用，不然看不到效果。

修改一下示例代码

<defs>
  <linearGradient id="MyGradient" spreadMethod="pad" x1="30%" x2="60%">
      <stop offset="0%" stop-opacity="1" stop-color="green"/>
      <stop offset="100%" stop-opacity="1" stop-color="red"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="100" height="50"/>

设置为：reflect

设置为：repeat

示例代码

绘制一个从上往下渐变的柱子，经常用于柱状图

<defs>
  <linearGradient id="MyGradient" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-opacity="1" stop-color="#8BEDFF"/>
      <stop offset="100%" stop-opacity="1" stop-color="#0F81FF"/>
  </linearGradient>
</defs>

<rect fill="url(#MyGradient)" x="10" y="10" width="20" height="300"/>

<radialGradient>

用来定义径向渐变，以对图形元素进行填充或描边。这个理解为用来定义放射状的渐变。

该标签也需要结合 <stop> 标签一起使用。

<defs>
  <radialGradient id="exampleGradient">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>

由图示可以看出。默认情况下，渐变是从中心开始，逐渐往外变化。

主要属性

gradientUnits 同 <liearGradient> 的同名属性。
gradientTransform 同 <liearGradient> 的同名属性。
spreadMethod 同 <liearGradient> 的同名属性。
cx 定义一个中心点的 x 轴坐标。
cy 定义一个中心点的 y 轴坐标。
r 放射渐变的半径。
fx 此属性用来定义径向渐变的焦点的 x 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fy 此属性用来定义径向渐变的焦点的 y 轴坐标。如果该属性没有被定义，就假定它与中心点是同一位置。
fr 此属性用来定义径向渐变的焦点的半径。若该属性没有被定义，默认值为 0%。

主要属性示例

改变中心坐标的位置，设置cx，cy为20%。

<defs>
  <radialGradient id="exampleGradient" cx="20%" cy="20%">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>

渐变半径r改为20%

<defs>
  <radialGradient id="exampleGradient" r="20%">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>

将fx fy设置为20%

<defs>
  <radialGradient id="exampleGradient" fx="20%" fy="20%">
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>

将fr设置为20%

<defs>
  <radialGradient id="exampleGradient" fr="20%" >
    <stop offset="10%" stop-color="gold"/>
    <stop offset="95%" stop-color="green"/>
  </radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="200" cy="200" r="100"/>

其他

<marker>

marker元素定义了在特定的元素、元素、元素或者元素上绘制的箭头或者多边标记图形。

developer.mozilla.org/zh-CN/docs/…

<clipPath>

SVG 元素 <clipPath> 定义一条剪切路径，可作为其他元素的 clip-path 属性的值。

剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制。

developer.mozilla.org/zh-CN/docs/…

可视化-SVG基础教程

参考教程

目录

容器

<svg>

主要属性

注意事项

<defs>

主要属性

<g>

主要属性

<use>

主要属性

<script>

<style>

形状

<rect>

主要属性

注意事项

<ellipse>

主要属性

<circle>

主要属性

<line>

主要属性

注意事项

<polygon>

主要属性

<polyline>

主要属性

<path>

主要属性

<title>

主要属性

文本

<text>

主要属性

<tspan>

主要属性

<textPath>

主要属性

渐变

<linearGradient>

主要属性

<stop>

主要属性

主要属性对应的图示

示例代码

<radialGradient>

主要属性

主要属性示例

其他

<marker>

<clipPath>