SVG入门

1. SVG是使用XML描述二维图形和绘图程序的语言是指可伸缩矢量图形。

2. 位图和矢量图

   • 位图：也称为点阵图、删除图像、像素图，简单地说，是由象素组成的最小单位，缩放会扭曲。构成位图的最小单位是象素，包括相应的文件格式.jpg 、.png、.gif等
   • 矢量图：又称向量图，简单地说，就是缩放不失真的图像格式。矢量图是通过多个对象的组合生成的，每个对象的记录方法都是通过数学函数实现的。也就是说，矢量图实际上不记录图中的每一点信息，而是记录元素形状和颜色的算法。当您打开一个矢量图时，软件计算图像对应的函数，并向您显示计算结果[图形的形状和颜色]。包括相应的文件格式.svg 、.ai等

3. 简单示例

   <svg version="1.1"   baseProfile="full"   width="300" height="200"   xmlns="http://www.w3.org/2000/svg">    <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />    <circle cx="150" cy="100" r="80" fill="green" />    <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>  </svg> 

   效果：

• 基本图形：、、、、、 、

• 基本属性：fill、stroke、stroke-width、transform

1. 矩形，x表示矩形左上角距离原点的x值，y从原点表示矩形左上角的y值，width表示矩形的宽度，height表示矩形高，rx定义x轴的圆角半径尺寸，ry定义y轴的圆角半径尺寸，rx与ry只有一项时，另一项的值相等。

2. 圆形，cx表示从圆心到原点的x值，cy表示圆心到原点的y值，r表示半径。

3. 椭圆，x表示矩形左上角距离原点的x值，y从原点表示矩形左上角的y值，rx定义x轴的圆角半径尺寸，ry定义y轴的圆角半径。

4. 直线，x1直线开始点的x值，y1直线开始点的y值，x2直线结束点的x值，y2直线终点的y值。

5. 折线，points表示折线转折点的点集，如points="x1 y1 x2 y2 x3 y3"。

6. 多边形，points表示多边形角的点集，如points="x1 y1 x2 y2 x3 y3"。

7. 文本，x表示表示矩形左上角距离原点的x值，y表示矩形左上角距离原点的y值。

8. 表示填充的颜色，如fill="#fff"

9. 表示描边的颜色，如stroke="#000"

10. 表示描边的粗细，如stroke-width="5"

11. 表示图形坐标与父系坐标变换的值，如transform="translate(150 0)"。

• 创建图形document.createElementNS(ns,tagName)。SVG拥有自己的命名空间，不能用document.createElement(tagName)创建。
• 添加图形element.appendChild(childElement)
• 设置属性element.setAttribute(name,value)
• 获取属性element.getAttribute(name)

• 世界：一个SVG就是一个世界，世界是客观存在的，无法确定在哪里有多大，定义了内容，就确定了的。

• 视野：我们主观的能看到的部分，能人为的控制大小和位置
  

• 视窗：浏览器划给SVG渲染内容的区域，视窗控制着视野，一般情况下，视窗在世界的位置和大小就是视野的位置和大小。
  

SVG使用的坐标系统是笛卡尔坐标系统，作用是为图形提供统一的定位基准，SVG中的笛卡尔坐标系正角方向是逆时针方向的。

• 用户坐标系

  用户坐标系，指的是世界的坐标系。前面提到，世界是无穷的，所以用户坐标系也是无穷的，我们并不知道它的起点在哪。因为世界是一切的起点，所以用户坐标系也是其它坐标系的起点，用户坐标系也称为原始坐标系。前面提到Viewbox，就是用来观察用户坐标系的某一区域

• 自身坐标系

  自身坐标系就是每个分组或者每个图形自身携带有的坐标系，这个坐标系用于给图形定义⾃己的形状。⽐如 x, y 坐标以及宽高，都是基于⾃身坐标系进行定义的。 如下图，在SVG中创建了一个rect矩形元素，以及模拟出的坐标系，注意：模拟出的x轴和y轴只是为了演示效果，我们只需关心实际意义。
  

  <div style="border:1px solid #333333position:relative">
      <span style="color:green;display:block">世界</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="600" height="320" style="margin-left:100px;">
          <!--模拟坐标系 不用关心这里-->
          <g transform="translate(10, 10)">
              <!--X轴-->
              <path stroke="red" d="M0,0 H300 M300,-5 V5 L310,0 L300,-5" fill="red"></path>
              <!--Y轴-->
              <path stroke="red" d="M0,0 V300 M-5,300 H5 L0,310 L-5,300" fill="red"></path>
          </g>
           <rect x="10" y="10" width="100" height="50" fill="red"></rect>
      </svg>
  </div>
  

• 前驱坐标系

  前驱坐标系，就是父容器坐标系。拿上面的例子来说，标签的父容器就是SVG，也就是说标签的前驱坐标系就是用户坐标系。如果标签的父容器是标签，那标签的前驱坐标系就是标签的自身坐标系。如下图，标签的自身坐标系相对前驱坐标系做了右下移动30px的变换。

<div style="border:1px solid #333333position:relative">
    <span style="color:green;display:block">世界</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" style="margin-left:100px;">
        <!--模拟坐标系 不用关心-->
        <text x="0" y="20" fill="red">g的自身坐标系</text>
        <g transform="translate(10, 30)">
            <!--X轴-->
            <path stroke="red" d="M0,0 H300 M300,-5 V5 L310,0 L300,-5" fill="red"></path>
            <!--Y轴-->
            <path stroke="red" d="M0,0 V300 M-5,300 H5 L0,310 L-5,300" fill="red"></path
            <!--模拟坐标系  不用关心-->
        <g transform="translate(30, 30)">
            <!--X轴-->
            <path stroke="green" d="M0,0 H300 M300,-5 V5 L310,0 L300,-5" fill="green"></path>
            <!--Y轴-->
            <path stroke="green" d="M0,0 V300 M-5,300 H5 L0,310 L-5,300" fill="green"></path>
        </g>
        <text x="5" y="20" fill="green">rect的自身坐标系</text>
        <rect x="80" y="80" width="200" height="100" fill="green"></rect>
        </g>
    </svg>
</div>

• 参考坐标系

  参考坐标系是不确定的，它可以是任何一个坐标系。拿上面的矩形举例，如果我需要相对用户坐标系来计算当前矩形的宽度、高度以及位置，那么当前矩形的参考坐标系就是用户坐标系，就好像中学时代学习的相对运动中的运动参照物一样。

我们可以观察某个坐标系中的元素在参考坐标系中的坐标，这种行为称之为坐标观察。SVG中所有元素都提供了以下四个方法来进行坐标观察：