SVG学习笔录（一）

　　SVG可缩放矢量图形（Scalable Vector Graphics）这项技术，现在越来越让大家熟知，在h5的移动端应用使用也越来越广泛了， 下面让我分享给大家svg学习的经验。

　　HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。

一、什么是svg？

　　Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

　　特征：

　　SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
　　SVG 用来定义用于网络的基于矢量的图形
　　SVG 使用 XML 格式定义图形
　　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
　　SVG 是万维网联盟的标准
　　SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

　　与其他图像格式相比，使用 SVG 的优势在于：
　　SVG 可被非常多的工具读取和修改（比如记事本）
　　SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
　　SVG 是可伸缩的
　　SVG 图像可在任何的分辨率下被高质量地打印
　　SVG 可在图像质量不下降的情况下被放大
　　SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
　　SVG 可以与 Java 技术一起运行
　　SVG 是开放的标准
　　SVG 文件是纯粹的 XML

　　在兼容方面，chrome、foxfire、ie9及以上浏览器支持，但是SVG SMIL动画 IE浏览器(包括IE11)整体不支持（但对于移动端来说呢，基本支持）。

　　注意：SVG是以XML定义的，所以是大小写敏感的，这点与HTML不一样。

二、SVG的呈现方式

　　对于直接支持SVG的浏览器，SVG主要采用两面两种呈现的方式。

　   内联到HTML
　　SVG是标准的HTML元素，直接写到HTML中就可以了，看下面的例子：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->
  <title> My First SVG Page</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       width="200px" height="200px">
    <rect x="0" y="0" width="100%" height="100%"
          fill="none" stroke="black"/>
    <circle cx="100" cy="100" r="50"
            style="stroke: black; fill: red;"/>
  </svg>
</body>
</html>

　　请注意开头的部分xml声明，与svg的命名空间xmlns、版本version等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。

　　独立SVG文件

　　独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。

　　1.独立的SVG文件/页面，定义的模板基本就像下面的一样：

<svg width="100%" height="100%">   
  <!-- SVG markup here. -->    
  <circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>
</svg>

　　把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。

　　2.HTML引用外部的SVG文件，可以使用<embed> <object>  <iframe>  引入

　　语法：<embed> 

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

　　语法：<object>

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

　　语法：<iframe> 

<iframe src="rect.svg" width="300" height="100">
</iframe>

三、SVG的渲染顺序

　　SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。 

四、SVG的文档结构

　　SVG文档的元素基本可以分为以下几类：

  • 图形元素：circle, ellipse, line, path, polygon, polyline, rect；
  • 解释元素：desc, metadata, title；
  • 结构元素：defs, g, svg, symbol, use；
  • 渐变元素：linearGradient, radialGradient；
  • 动画元素：animate, animateColor, animateMotion, animateTransform, set；
  • 其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

　　视窗 - svg元素

      可以在svg元素中以任何顺序放置任何的其他元素，包括嵌套svg元素。
      svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
      svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。svg元素就不多说了，完整的属性和事件列表参看后面的官方文档。

　　图形元素：

　　SVG 有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

　　具体的我说一下path的用法，其他的都比较好理解：

　　路径 - path元素

　　这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
　　d：一系列绘制指令和绘制参数(点)组合成。

　　绘制指令分为绝对坐标指令和相对坐标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，坐标也是绝对坐标；相对指令使用对应的小写字母，点的坐标表示的都是偏移量。 

　　绝对坐标绘制指令
　　这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0)，则下面的绝对坐标指令代表的含义如下所示：

指令

参数

说明

M

x y

将画笔移动到点(x,y)

L

x y

画笔从当前的点绘制线段到点(x,y)

H

x 

画笔从当前的点绘制水平线段到点(x,y0)

V

y 

画笔从当前的点绘制竖直线段到点(x0,y)

A

rx ry x-axis-rotation large-arc-flag sweep-flag x y

画笔从当前的点绘制一段圆弧到点(x,y)

C

x1 y1, x2 y2, x y

画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)

S

x2 y2, x y

特殊版本的三次贝塞尔曲线(省略第一个控制点)

Q

x1 y1, x y 

绘制二次贝塞尔曲线到点(x,y)

T

x y

特殊版本的二次贝塞尔曲线(省略控制点)

Z

无参数

绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。

　　移动画笔指令M，画直线指令：L，H，V，闭合指令Z都比较简单。例子：

	<svg width="200" height="150">
	  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
		stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
	  <path d="M 10 75 L 190 75" stroke="red"
		stroke-linecap="round" stroke-width="1" stroke-dasharray="20" fill="none"/>
	</svg>

　　解释性元素 - desc元素与title元素（此元素主要是做辅助，不会显示）
      每个容器元素(可以包含其他容器元素或者图形元素的元素，例如：a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素，这两个元素都是辅助性的元素，用于解释相关情境；它们的内容都是文本。当SVG文档被渲染的时候，这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大，title在有些实现中是作为提示信息出现的，所以通常title是放到父元素的第一个位置上。　　

　　结构元素

　　组合 - g元素

　　 g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子：

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

　　注意几点：
　　1. xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档，XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间，给命名空间提供别名等。
　　2. g元素是可以嵌套的。
　　3. 组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。
　　4. 组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等)，这也是使用组合的一种场景。 

　　模板 - symbol元素

  　　symbol元素用于定义图形模板(模板可以包含很多图形)，这个模板可以被use元素实例化。模板的功能与g元素很相似，都是提供一组图形对象，但是也有一些区别。与g元素不同的地方是：
　　1.symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染。
　　2.symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。
      从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，'display'属性是没有意义的。
      下面这个修改过的代码显示了symbol的使用方式：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <symbol id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </symbol>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>
  <use xlink:href="#group1" target="_blank" rel="nofollow">

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".02cm" y=".02cm" width="4.96cm" height="4.96cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

　　定义 - defs元素 

      SVG允许定义一组对象，然后重用这组对象(注意，不仅仅是图形对象)。最常见的例子如定义渐变色，然后再其他的图形对象中赋给fill属性。渐变色定义的时候是不会渲染的，所以这类型的对象可以放到任何地方。重用对于图形对象中也是经常存在的，而且我们也不希望定义的时候直接渲染，而是想在引用的地方渲染，这个可以用defs元素实现。

      通常情况下，推荐的做法是：只要有可能，就把被引用的对象放到defs元素中。这些对象通常是：altGlyphDef,clipPath,cursor,filter, marker,mask,pattern,linearGradient,radialGradient，symbol和图形对象等。把这些对象定义在defs元素中很容易理解，所以就提高了可访问性。
      其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不过每个元素的特性可能少许不同：比如g元素是直接渲染的，symbol和defs不会直接渲染，symbol含有viewBox属性，会创建新的视窗。

      通常都会给在defs中定义的元素赋予id属性，并在用到的地方直接使用。根据元素的不同，这些定义可以用到不同地方，比如下面的渐进色作为属性来使用了：

　　

<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />
</svg>

　　图形相关元素的定义可以用use元素链接到文档。例如：

<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

　　 在这里请注意xlink名称空间的使用。尽管大多数查看器没有它也将正确显示这一项，但为了保持一致，xlink名称空间应该在<svg></svg>元素上定义。

　　动画元素

　　 SVG提供了下列动画元素：
　　1. animate元素
      这个是最基本的动画元素，可以直接为相关属性提供不同时间点的值。
　　2. set元素
      这个是animate元素的简写形式，支持所有的属性类型，尤其是当对非数字型的属性(例如visibility)进行动画时很方便。set元素是非增量的，相关的属性对之无效。 to指定的动画结束值类型一定要符合属性的取值类型。
　　3. animateMotion元素
      路劲动画元素。这个元素大多数属性都和上面一样，只有下面几个稍微有点区别：
  calcMode = "discrete | linear | paced | spline"
      这个属性的默认值不同，在该元素中默认的是paced。
  path = "<path-data>"
      动画元素移动的路径，格式与path元素的d属性的值的格式是一致的。
  keyPoints = "<list-of-numbers>"
      这个属性的值是一系列分号给开的浮点数值，每个值的取值范围是0~1。这些值代表了keyTimes属性指定的对应时间点移动的距离，这里距离具体是多少是由浏览器自己决定的。
  rotate = <number> | auto | auto-reverse"
      这个属性指定了元素移动时旋转的角度。默认值是0，数字代表旋转的角度，auto表示随着路劲的方向转动物体。auto-reverse表示转向与移动方向相反的方向。
      此外animateMotion元素的from,by,to,values的值都是坐标对组成的；x值与y值之间用逗号或空格分开，每个坐标对之间用分号隔开比如from="33,15"表示起点x坐标为33，y坐标为15。
指定运动路径的方式有两种：一种为直接给path属性赋值，一种为使用mpath元素作为animateMotionde的子元素指定路径。如果同时使用这两种方式，则使用mpath元素优先级高。这两种方式优先级都比values,from,by,to高。
      看一个小例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />

  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

　　4. animateColor元素
      颜色动画元素。这是一个过时的元素，基本上所有功能都可以用animate代替，所以还是不要用了。

　　5. animateTransform元素
      变换动画元素。看看特殊的一些属性：
     type = "translate | scale | rotate | skewX | skewY"
      这个属性指定了变换的类型，translate是默认值。
      from,by和to的值相应的都是对应变换的参数，这个还是与前面讲的变换是一致的。values则是一组分号隔开的这样的值系列。

　　支持动画效果的元素和属性
      基本上所有图形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持动画。基本上大多数的属性都支持动画效果。详细的说明请参看官方文档。

五、理解SVG的viewport，viewBox，preserveAspectRatio

　　viewport

　　表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。

<svg width="500" height="300"></svg>

　　上面的SVG代码定义了一个视区，宽500单位，高300单位。

　　注意：

　　上面的SVG代码定义了一个视区，宽500单位，高300单位。

　　不带单位的情况 ：不带单位的值被认为带的是"用户单位"，就是当前用户坐标系的单位值。

　　带单位的情况

　　 svg中相关单位与CSS中是一样的：em,ex,px,pt,pc,cm,mm和in。长度还可以使用"%"。
 　　 相对度量单位：em和ex也与CSS中一样，是相对于当前字体的font-size和x-height来说的。
 　　 绝对度量单位：一个px是等于一个"用户单位"的，也就是"5px"与"5"是一样的。但是一个px是不是对应一个像素，那就看有没有进行过一些变换了。
       其他的几个单位基本都是px的倍数：1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。

       如果最外层的SVG元素的width和height没有指定单位(也就是"用户单位")，则这些值会被认为单位是px。

　　viewBox视窗变换

 　　viewBox属性值的格式为(x0,y0,u_width,u_height)，每个值之间用逗号或者空格隔开(已经绘制图形的坐标一样)，它们共同确定了视窗显示的区域：视窗左上角坐标设为(x0,y0)、视窗的宽设为u_width，高为u_height；这个变换对整个视窗都起作用。

      这里一定不要混淆：视窗的大小和位置已经由创建视窗的元素和外围的元素共同确定了(例如最外层的svg元素建立的视窗由CSS，width和height确定)，这里的viewBox其实是设置这个确定的区域能显示视窗坐标系的哪个部分。
      viewBox的设置其实是包含了视窗空间的缩放和平移两种变换。

      变换的计算也很简单：以最外层的svg元素的视窗为例，假设svg的宽与长设置为width,height，viewBox的设置为(x0,y0,u_width,u_height)。则绘制的图形，宽和高的缩放比例分别为：width/u_width, height/u_height。视窗的左上角的坐标设置为了(x0,y0)。

　　 在日常工作中，我们经常需要完成的一个任务就是缩放一组图形，让它适应它的父容器。我们可以通过设置viewBox属性达到这个目的。

　　能建立新视窗的元素
      任何时候，我们都可以嵌套视窗。创建新的视窗的时候，也会创建新的视窗坐标系和用户坐标系，当然也包括裁减路径也会创建新的。下列是能建立新视窗的元素列表：
　　svg：svg支持嵌套。
　　symbol：当被use元素实例化的时候创建新的视窗。

　　image：引用svg元素时会创建新视窗。
　　foreignObject：创建新视窗去渲染里面的对象。

　　 preserveAspectRatio-保持缩放的比例 属性
      有些时候，特别是当使用viewBox的时候，我们期望图形占据整个视窗，而不是两个方向上按相同的比例缩放。而有些时候，我们却是希望图形两个方向是按照固定的比例缩放的。使用属性preserveAspectRatio就可以达到控制这个的目的。
      这个属性是所有能建立一个新视窗的元素，再加上image,marker,pattern,view元素都有的。而且preserveAspectRatio属性只有在该元素设置了viewBox以后才会起作用。如果没有设置viewBox，则preserveAspectRatio属性会被忽略。
      属性的语法如下：preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
　　注意3个参数之间需要使用空格隔开。
　　defer:可选参数，只对image元素有效，如果image元素中preserveAspectRatio属性的值以"defer"开头，则意味着image元素使用引用图片的缩放比例，如果被引用的图片没有缩放比例，则忽略"defer"。所有其他的元素都忽略这个字符串。
　　align:该参数决定了统一缩放的对齐方式，可以取下列值：
  　　none - 不强制统一缩放，这样图形能完整填充整个viewport。
  　　xMinYMin - 强制统一缩放，并且把viewBox中设置的<min-x>和<min-y>对齐到viewport的最小X值和Y值处。
  　　xMidYMin - 强制统一缩放，并且把vivewBox中X方向上的中点对齐到viewport的X方向中点处，简言之就是X方向中点对齐，Y方向与上面相同。
  　　xMaxYMin - 强制统一缩放，并且把viewBox中设置的<min-x> + <width>对齐到viewport的X值最大处。
 　　 类似的还有其他类型的值：xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax。这些组合的含义与上面的几种情况类似。
　　meetOrSlice：可选参数，可以去下列值：
 　　 meet - 默认值，统一缩放图形，让图形全部显示在viewport中。
  　　slice - 统一缩放图形，让图形充满viewport，超出的部分被剪裁掉。

六、SVG图形在移动端的自适应方法

　　在上面我们了解了viewBox视窗变换之后，其实可以得出一个公式：

　　width为svg的里面设置的宽度

　　height为svg里面设置的高度

　　uwidth为svg里面设置的宽度

 　  uheight为svg里面设置的高度

　　cw为图形设置的高度

　　ch为图形设置的宽度

　　sW为实际宽度

　　sH为实际高度

　　实际宽度：sW = (width/uwidth)*cw　　

　　实际高度：sH = (height/uheight)*ch

例子：

	<svg width="200" height="200" viewBox="0 0 100 100">
	 <rect x="0" y="0" width="200" height="200" fill="Red" />
	</svg>

　　根据公式：

　　sW = (200/100)*200 = 400px

　　sH = (200/100)*200 = 400px

　　场景需求：通常来说我们的我移动端大部分视觉稿来说是640*960的（以这个为主呢，不说1080、720了），这里黑色不规则区域高度为200px，宽度为640px（640下面）

　　

　　根据上面的公司，其实我们的svg里面的图形元素可以按实际640的大小写，viewbox的大小值也可以按，640的大小写，我们只需要控制svg容器上面的width、height大小的值变化，就可以达到适应的效果，看看代码：

<svg class="svg_pro" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0,0,640,200">
			<polygon points="0,0 253,0 200,200 0,200" style="fill:rgba(0,0,0,.8);"></polygon>
			<polygon points="256,0 640,0 640,200 203,200" style="fill:rgba(0,0,0,.8);"></polygon>
</svg>

　　　svg基本上所有的属性(对于所有元素，不仅是文本)都可以用CSS与一个元素关联，并且所有CSS属性都在SVG图像中可用，那么我们在样式里面加上如下样式，就可以达到只适应：

svg.svg_pro {
    position: absolute;
     100%; //这里宽度的值随着屏幕变化
    height: 100%; //高度值随着屏幕变化（图片缩放，改变容器高度）
    top: 0;
}

　　然并卵，这样就可以达到效果了，待续………………

参考资料：

　　突袭HTML5之SVG 2D入门（svg教程写的很全，推荐指数5星）

　　SVG 教程（w3school的svg教程，也不错）

　　mozilla svg教程（推荐给喜欢看英文教程的朋友）

　　超级强大的SVG SMIL animation动画详解

　　w3cplus大漠博客上的svg教程

　　基本 SVG 动画

　　知乎上面对svg的一些讨论（大家在使用时，有必要可以看一下）

　　svg动画推荐

　　SVG技术入门：如何画出一条会动的线

推荐svg库：

　　Walkway

　　chartist-js

　　snapsvg.io

　　progressbar.js

　　raphaeljs

　　bonsaijs

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pingfan1990/p/4757934.html