svg初认识

svg初步认识

什么是svg？

在网页中绘制矢量图片，（矢量图放大后不会失真），svg是一种基于xml语法的图像格式，全称是可缩放矢量图（scalable vector graphics）,其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。SVG文件可以直接插入到网页，成为DOM的一部分，然后用js和css进行操作。

语法

SVG代码都放在顶层svg标签中

<svg width="100%" height="100%">
      <circle id="mycircle" cx="50" cy="50" r="50" fill="orange"></circle>
</svg>

svg的width和height属性，默认大小300（宽）*150（高）像素，如果只想展示svg图像的一部分，就要指定viewBox属性。

<svg width="100%" height="100%" viewBox="50 50 50 50">
      <circle id="mycircle" cx="50" cy="50" r="50"></circle>
</svg>

1 circle 圆中cx，cy,r,横坐标、纵坐标、半径。

css样式中设置属性颜色

<svg width="400" height="400">
      <circle cx="50" cy="50" r="50" fill="orange"></circle>
      <circle cx="150" cy="150" r="50" class="bgred"></circle>
      <circle cx="250" cy="250" r="50" class="bgblue"></circle>
    </svg>

.bgred{
      fill:red;
    }
    .bgblue{
      fill: skyblue;
      stroke: red;
      stroke-width: 10;
    }

2 line 直线

<svg width="400" height="400">
        <line x1="0" y1="0" x2="100" y2="0" style="stroke:rgb(0,0,0);stroke-width:5"></line>
    </svg>

x1 y1 开始坐标，x2 y2 终点坐标

3 polyline 折线

<svg width="400" height="400">
      <polyline points="3,3 30,28 3,56" fill="none" stroke="black"></polyline>
  </svg>

points每个端点的坐标横坐标和纵坐标之间逗号分隔

4 rect 方形

<svg width="200" height="200">
    <rect x="0" y="0" width="100" height="100" style="stroke:tomato; fill: blue"></rect>
  </svg>

5 ellipse 椭圆

<svg width="200" height="200">
    <ellipse cx="60" cy="60" rx="20" ry="40" stroke="red" stroke-width="5" fill="silve"></ellipse>
  </svg>

cx cy 中心坐标 rx ry横向轴半径 纵向轴半径

6 polygon 多边形

	<svg width="400" height="400">
      <polygon fill="green" stroke="orange" stroke-width="1" points="0,0 0,100 100,100  0,0"></polygon>
    </svg>

7 path 路径绘制顺序

<svg width="600" height="600">
      <path 
      d="M 50,50, L 100,60, L 160,100,L 250,300,L 450,450 Z" class="path"
      ></path>
    </svg>
    
    
.path{
      stroke: chartreuse;
      stroke-width: 10px;
      fill: none;
    }

M 移动到；L途经路径；Z闭环

8 text 绘制文本

<svg width="600" height="600">
      <text x="200" y="400">绘制路径</text>
</svg>

9 use标签复制其他的图形

	<svg width="600" height="600" style="border: 1px solid #ccc;">
      <circle id="circle1" cx="200" cy="200" r="50" fill="orange" stroke="skyblue" stroke-width="10"></circle>
      <use href="#circle1" x="300" y="300" r="50" fill="red" stroke="skyblue" stroke-width="10"></use>
    </svg>

10 g 将多个图形打包成一个组

	<svg width="1000" height="1000">
      <g id="miqi">
        <circle cx="100" cy="100" r="50"></circle>
        <circle cx="500" cy="100" r="50"></circle>
        <circle cx="300" cy="300" r="200"></circle>
      </g>
      <use href="#miqi" x="500" y="0"></use>
    </svg>

11 defs 只声明标签

	<svg width="1000" height="1000">
      <defs>
        <g id="miqi">
          <circle cx="100" cy="100" r="50"></circle>
          <circle cx="500" cy="100" r="50"></circle>
          <circle cx="300" cy="300" r="200"></circle>
        </g>
      </defs>
      
      <use href="#miqi" x="500" y="0"></use>
    </svg>

12 pattern标签自定义一个形状，该形状可以被引用来平铺一个区域。

	<svg width="500" height="500">
      <defs>
        <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
          <circle fill="#bee9e8" cx="50" cy="50" r="35" />
        </pattern>
      </defs>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
    </svg>

13 image插入图片文件

	<svg  width="100" height="100" viewBox="0 0 100 100">
      <image xlink:href="img/0.jpg" width="50%" height="50%"> </image>
    </svg>

14 animate 用于产生动画效果

	<svg  width="1000" height="1000">
      <rect x="0" y="0" width="100" height="50" fill="orange">
        <animate attributeName="x" from="0" to="500" dur="3s" repeatCount="indefinite"></animate>
        <animate attributeName="y" from="0" to="500" dur="3s" repeatCount="indefinite"></animate>
        <animate attributeName="fill" from="orange" to="skyblue" dur="3s" repeatCount="indefinite"></animate>
      </rect>
    </svg>

animateTransform 旋转

<svg  width="500px" height="500px">
      <rect x="0" y="0" width="100" height="50" fill="orange">
        <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite"></animateTransform>
      </rect>
    </svg>

from和to属性：第一个角度， 第二个值横坐标，第三个值纵坐标。

Javascript操作

dom操作

如果SVG代码直接写在HTML网页之中，它就成为网页DOM的一部分可以直接DOM操作。

比如设置属性setAttribute, dom.style.fill()样式，这里就不在详细的赘述了。跟js一样。

可以做个练习比如环形进度条，和星体转动（地球围着太阳转，月亮围着地球转）等。
示例一：：环形进度条