【SVG】svg入门

svg图和其他png图的区别：

svg图片上的每一个小的组成元素都是一个标签，由一个大的svg标签包裹作为一个整体
普通的png图片，就是作为一个整体，只能修改宽高大小等样式，不能修改细节

一、标签属性

1、SVG：可缩放矢量图（Scalable Vector Graphics）

2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入

3、svg标签属性

• 1、width、height：如果不指定这两个属性，默认是宽：300px，高：150px
• 2、viewBox(左上角的横坐标，左上角的纵坐标，视口的宽度，视口的高
  度)：决定可视范围

4、circle标签属性

• 1、cx：横坐标，单位都是px，坐标都是相对于svg把左上角的原点
• 2、cy：纵坐标
• 3、r：半径
• 4、fill：填充色
• 5、stroke：描边色
• 6、stroke-width：边框宽度

5、line标签属性

• 1、x1、y1属性：线段起点的横坐标和纵坐标
• 2、x2、y2属性：线段终点的横坐标和纵坐标
• 3、style属性：线段的样式

6、polyline标签绘制折线

• 1、points属性：指定了每个端点的坐标，横、纵坐标之间与逗号分隔，点与点之间用空格分隔。

7、rect标签绘制矩形

• 1、x、y属性：ao属性：矩形的宽度和高度（单位像素）。

8、ellipse标签绘制椭圆

• 1、cx、cy属性：椭圆中心的横坐标、纵坐标（单位像素）
• 2、rx、ry属性：椭圆横向轴、纵向轴的半径（单位像素）。

9、polygon标签绘制多边形

• 1、points属性指定了每个端点的坐标，横、纵坐标之间与逗号分隔，点与点之间用空格分隔。

10、path标签绘制路径

• 1、d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标
• 2、M：移动到（moveto） L：画直线到（lineto）Z：闭合路径
• 3、例：<path d=" M 18,3 L 46,3 L 46,40 Z "></path>

11、text标签绘制文本

• 1、x、y属性：表示文本区块基线（baseline）起点的横坐标和纵坐标
• 2、文字的样式可以用class或style属性指定

12、use标签复制一个形状

• 1、href属性：指定所要复制的节点
• 2、x、y属性是<use>左上角的坐标
• 3、width、height：宽高

13、g标签 将多个形状组成一个组（group），方便复用。

14、defs标签 自定义形状，它内部的代码不会显示，仅供引用，类似于template

15、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)" />
</svg>

• 1、id="用于引用这个模式的唯一ID。"必需的
• 2、指定这个模式去填充下面的矩形

16、image标签 插入图片文件

• 1、xlink:href属性表示图像的来源

17、animate标签 产生动画效果

• 1、attributeName：发生动画效果的属性名。
• 2、from：单次动画的初始值。
• 3、to：单次动画的结束值。
• 4、dur：单次动画的持续时间。
• 5、repeatCount：动画的循环模式。

18、animateTransform标签

• 1、平移，缩放，旋转或倾斜
• 2、from=“0 200 200” ：角度为0，围绕(200, 200)开始旋转
• 3、type=“类型的转换其值是随时间变化。可以是 ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY’”

19、animateColor标签

• 1、随着时间的推移颜色转换
• 2、by=“相对偏移值” from=“起始值” to=“结束值”

20、animateMotion标签

• 1、使元素沿着动作路径移动
• 2、calcMode=“动画的插补模式。可以是’discrete’, ‘linear’, ‘paced’, ‘spline’”
• 3、path=“运动路径”
• 4、keyPoints=“沿运动路径的对象目前时间应移动多远”
• 5、rotate=“应用旋转变换”
• 6、xlink:href=“一个URI引用<path>元素，它定义运动路径”

21、滤镜

1、定义滤镜

<svg>
 <defs>
   <filter id="f1" x="0" y="0">
     <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
   </filter>
 </defs>
 <rect width="90" height="90" stroke="green" stroke-width="3"
 fill="yellow" filter="url(#f1)" />
</svg>

fillter标签定义一个滤镜，包裹在defs标签中，id作为这个路径的唯一标识，方便下面的矩形使用滤镜
feGaussianBlur标签定义模糊效果，in="SourceGraphic"这个部分定义了由整个图像创建效果
stdDeviation属性定义模糊量

22、更多属性

• 1、stroke：可设置元素轮廓的颜色
• 2、stroke-width：轮廓宽度
• 3、stroke-linecap：定义不同类型的开放路径的终结（线段两个端点的形状）
• 4、stroke-dasharray：绘制虚线，短横线长度，空白长度，短横线长度，空白长度…(自动重复)

23、更多标签属性：SVG | MDN (mozilla.org)

二、js操作

1、作为DOM元素进行操作，可以添加class修改样式

2、如果使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。

• 1、如：<iframe src="circle1.svg"></iframe>
• 2、var svgIframe = document.getElementById(‘iframe’).contentDocument;
• 3、注：img标签不能获取svg文件

3、使用svg标签，获取svg源码

• 1、使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
• 2、var svgString = new XMLSerializer().serializeToString(document.querySelector(‘svg’));

三、示例

绘制logo

代码：

<svg width='400' height='400'>
    <rect x="50" y="50" rx="50" ry="50" width="200" height="200" style="fill:#ff1d41;"/>
    <circle cx='150' cy='150' r='70' stroke='white' stroke-width='15' stroke-dasharray='150,20,60,20,40,20' fill="#ff1d41" stroke-linecap='round'></circle>
    <path d='M 150,150 L 98,235'  stroke='white' stroke-width='15' stroke-linecap='round'></path>
    <path d='M 150,150 L 202,235'  stroke='white' stroke-width='15' stroke-linecap='round' stroke-dasharray='50 20 30'></path>
    <path d='M 80,238 L 220,238'stroke='#ff1d41' stroke-width='10'></path>
 </svg>