本文是基于《SVG精髓》一书的简单总结，文中的demo均为该书提供，目的是方便大家使用时快速查阅。

1. 坐标系统

• 视口（viewport）：文档使用的画布区域，表示SVG可见区域的大小，通常可以在 <svg>元素 上使用 width 和 height 属性确定视口的大小。

• viewBox：允许指定一个给定的一组图形伸展以适应特定的容器元素。这个属性值由4个数值组成，viewBox = <min-x> <min-y> <width> <height>， 分别代表想要叠加在视口上的用户坐标系统的最小x坐标、最小y坐标、宽度和高度。（可以理解为SVG内元素定位的真实坐标系统）

  

  viewport宽高为4cm和5cm（画布区域），viewBox的左上角(0, 0)与viewport重合，宽度是64个单位（每个单位1/16cm），高度是80个单位（每个单位1/16cm）。矩形rect的坐标是相对viewBox来定位的（如果没有设置viewBox，默认坐标系统就是viewport）

• preserveAspectRatio：可以指定被缩放的图像相对视口的对齐方式，以及是希望它适配边缘还是要裁减。该属性的模型为:

  preserveAspectRatio = "alignment [meet | slice]"

  alignment ：指定轴和位置，由一个x对齐方式和一个y对齐方式（min, mid, max）组合而成。默认为xMidYMid 。

  y对齐	xMin	xMid	xMax
  yMin	xMinYmin 视口左侧边缘、顶部边缘对齐	xMidYmin 视口水平中心、顶部边缘对齐	xMaxYmin 视口右侧边缘、顶部边缘对齐
  yMid	xMinYmid 视口左侧边缘、垂直中心	xMidYmid 视口水平中心、垂直中心	xMaxYmid 视口右侧边缘、垂直中心
  yMax	xMinYmax 视口左侧边缘、底部边缘对齐	xMidYmax 视口水平中心、底部边缘对齐	xMaxYmax 视口右侧边缘、底部边缘对齐

  meet ：缩小图像以适配可用的空间。

  slice ：裁减图像不适合视口的部分。
  上面的例子中，viewport和viewBox的宽高是等比缩放的，如果比例不同，就有可能出现溢出

2. 基本形状

• SVG中的基本形状

  形状	描述
  <line x1="start-x" y1="start-y" x2="end-x" y2="end-y" />	从起始点(start-x, start-y) 画一条线到 (end-x, end-y)
  <rect x="left-x" y="top-y" width="width" height="height" />	画一个矩形，左上角位于(left-x, top-y)，宽高分别为width和height
  <circle cx="center-x" cy="center-y" r="radius" />	以指定半径radius画一个圆，圆心位于(center-x, center-y)
  <ellipse cx="center-x" cy="center-y" rx="x-radius" ry="y-radius" />	画一个椭圆，x方向半径为x-radius，y方向半径为y-radius， 圆心位于(center-x, center-y)
  <polygon points="points-list" />	画一个封闭图形，轮廓由points-list指定，它由一系列x/y坐标对组成。 这些数值只能使用用户坐标，不可以添加长度单位。
  <polyline points="points-list" />	画一系列相连的折线段，折线点由points-list指定， 它由一系列x/y坐标对组成。 这些数值只能使用用户坐标，不可以添加长度单位。

• 笔画特性

  属性	值
  stroke	笔画颜色，默认为none
  stroke-width	笔画宽度，可用用户坐标或者指定单位的方式指定。 笔画的宽度会相对坐标网格线居中。默认值为1
  stroke-opacity	从0.0到1.0的数字。0.0是完全透明，1.0是完全不透明（默认值）
  stroke-dasharray	用一系列的数字来指定虚线和间隙的长度。 这些数字只能使用用户坐标，默认值为none
  stroke-linecap	线头尾的形状，值为butt（默认值）、round或square
  stroke-linejoin	图形的棱角或者一系列连线的状态， 取值为miter（尖的，默认值），round或者bevel（平的）
  stroke-miterlimit	相交处显示宽度与线宽的最大比例，默认值是4

• 填充特性

  属性	值
  fill	填充颜色，默认值为black
  fill-opacity	从0.0到1.0的数字。0.0是完全透明，1.0是完全不透明（默认值）
  fill-rule	属性值为nonzero（默认值）或evenodd。 该属性决定判断某个点是否在图形内部的方法。 只有当边线交叉时或者内部有“洞”时才有效。

    这里只介绍了该书的两个章节，它们是理解学习SVG的基础。接下来，我们将一起学习SVG里面常用的元素标签和坐标系统变换。

原文链接：