SVG 常用元素、viewBox、preserveAspectRatio等

不介绍已被标明废弃的元素，以及滤镜元素暂不介绍；以下元素除列出的属性外有些属性可能没有提及，以及它们的animatable，很多元素的很多属性的animatable是可行的，再补。

1，<animateMotion >该元素定义了一个元素如何沿着运动路径进行移动：它指定一个元素沿着指定的路径进行移动，animateMotion有着指定运动详细设置的属性如dur(定义一次运动所需的时间)；

a,指定的元素：有两种方式指定用于运动的元素，一是<animateMotion>的直接父元素；二是<animateMotion>属性href指定的元素；

b,指定的路径：有两种方式指定路径，一是<animateMotion>属性path(类似于<path>属性d的定义)；二是<animateMotion>的子元素<mpath>属性href指定的已定义的<path>(这是在复用已定义的path，希望元素在该路径上运动)；

c,<animateMotion>的属性：

path：定义一个运动路径如<animateMotion path="M30,30 H50 V60 L80,40">；

href：是用来指定运动元素的，如<animateMotion href="#rect" path="..."> ，那么该运动作用于一个id为'rect'的元素，若没有定义该值，则该运动作用于直接父元素如<rect ><animateMotion path="...'></rect>，animateMotion作用于该<rect>； 

dur：length如'3s'；定义一次运动的时长如<animateMotion dur="3s">一次运动的时长是3s； 

repeatCount：Number | indefinite；定义该运动的重复次数，默认是1次，该属性值可以是数字也可以是关键字'indefinite'表示无限次如<animateMotion repeatCount="indefinite">(注，这样是无效的，要补充完整其他属性，至少要有path、dur，以下类似)； 

calcMode：插值模式，可选值linear(默认)，线性运动；spline样条运动，与keySplines及keyTimes一起使用，利用曲线控制运动速度，该模式，必须与keyTimes以及keySpline同时指定，不然没有动画效果；paced踏步；discrete离线运动，是那种直接从一个值跳到下一个值，没有过程，属性values的值(也可以说是状态)所用时间间隔一样，但如果使用keyTimes，那时间间隔跟keyTimes有关；<animateMotion  calcMode="discrete">

keyTimes：<number-list>'Number1;Number2;..NumberN'；定义一个用分隔符分隔的时间值列表，与属性values列表的每个值一一对应，也就是说它们的长度一致，指定每个values值在具体的时间点执行；每个时间值的取值范围在[0,1]之间，连续的每一个值都是大于或等于前一个值； keyTimes就是定义时间点列表；keyTimes列表的语义与插值模式有关，在linear和spline模式下，要求第一个时间值是0，最后一个值是1，到一个values值之前，在时间间隔中连续变化；在discrete模式下，要求第一个时间值是0，最后一个不被要求是1，因为最后一个时间值是1的话，values的最后一个值的无法体现，可能是因为1也表示下一次运动的开始，discrete的动画形式是从一个值跳到下一个值，没有过程；在paced模式下，keyTimes属性会被忽略；在dur时长不确定情况下，keyTimes属性会被忽略；如 <animateMotion  keyTimes="0;.3;0.5;" values="20,30;40,60;50,70" dur="5s" calcMode="discrete">

keyPoints：用分隔符号';'分隔每一个值如'0; 0.2;0.5;1'的path的路程列表，每个值表示每段路程，其值范围在[0, 1]，且列表的个数与keyTimes的个数一致，keyTimes的值用来表示对应的keyPoints的值的时间点；指定keyPoints必须有对应的keyTimes才有动画效果；相当于<animate>属性values；该属性只存在于<animateMotion>标签中；运动轨迹会发生改变；就是指定path上的路程列表；把整个path路程看作是1；该属性估计只有在指定path或<mpath>才有效；<animateMotion keyPoints="0;.3;.5" keyTimes="0;.4;1">；keyPoints相对于path或<mpath>；

keySplines：定义一系列贝塞尔曲线控制点，每一个控制点描述是x1 y1 x2 y2;如'0 0 .5 .5' 给每一个时间段描述贝塞尔曲线速度；该属性只在calcMode="spline"的情况下有效； x1,x2,y1,y2的取值都在[0,1]的范围；对keySpline来说，keyTimes的值就是锚点，keySpline是定义了两个控制点x1,y1和x2,y2，因此，keyTimes的个数会比keySplines的个数多1，也就是两个keyTimes相当于两个锚点，一个keySplines的值相当于两个锚点见的控制点，就像3次贝塞尔曲线；<animateMotion keyPoints="0;.3;.5" keyTimes="0;.4;1" calcMode="spline" keySplines=".5 0 .5 0;0 0 .5 .5">

values：在没有指定属性path或子元素<mpath>的情况下会用到values，它是坐标点列表如'20,30;40,50'('x1,y1;x2,y2')；在指定keyTimes情况下，keyTimes与values个数要求一致；表示每个values的值要在哪个keyTimes点完成；所以keyTimes和calcMode、values、keyPoints、keySplines之间有点关系；<animateMotion  keyTimes="0;.4;1" calcMode="spline" keySplines=".5 0 .5 0;0 0 .5 .5" values="20,30;40,60;50,70">

rotate：表示目标元素旋转角度，可选值有auto | auto-reverse | Number

origin：运动原点，在SVG中无效；

2，<mpath  xlink:href='#test'>复用已定义的<path id='test'>, <mpath>作为<animateMotion>的子元素，使其能按path定义的路径运动；若不复用外部的path，可以在<animateMotion>加上属性path；文档中说，SVG2(貌似是 version="1.1")已移除 xlink 命名空间前缀；所以xlink:href可由属性href代替；可能有其他的属性暂不介绍；

3，<animate attributeName="" attributeType="css | auto| xml" dur="3s" values="3;5;3"  repeatCount="4" attributeName="width" to='' from=''>，某个属性多个值改变时可用values指定，两个值之间的改变可以使用to和from；定义一个动画，即属性值改变时的动画；

a, 指定的元素：一是可由属性href指定目标元素，即运动元素；二是<animate>元素的直接父元素；

b,<animate>元素的属性：

attributeName：动画作用在目标元素上的指定属性的名字，如<animate attributeName="x">(注，这样是无效的，要补充完整的属性，至少需要attributeName、dur、以及attributeName指定的属性的值的变化如from和to或by、或values)，表示指定动画作用在属性x上；若有多个属性的变化需要动画，可以定义多个<animate>； 

attributeType：指定属性attributeName的类型，如css | xml | auto，css属性或xml元素属性；<animate attributeName="x" attributeType="xml">

keySplines：与<animateMotion>介绍的keySpline同样的使用； 

values：也是一个列表，每一个值的语义由attributeName属性决定； 指定values，会忽略属性from、to

keyTimes：与<animateMotion>介绍的keyTimes属性同样的使用；

calcMode：与<animateMotion>介绍的calcMode属性同样的使用；

calcMode，values，keyTimes，keySplines：values的长度和keyTimes长度必须一致，keySplines的长度比keyTimes的长度一定小一个；calcMode的值决定keyTimes的规定如<animateMotion>所介绍的那样，calcMode为'spline'时可用keySplines而且一定要用keySplines，否则无动画效果；

to：表示一个终止值，语义由attributeName决定，比如<animate attributeName = 'color' to="#333"  from="#000" />时， ，表示终止颜色是#333；当<animate attributeName='x' to="30"/>时，表示元素所处x轴的终止值； 

from：表示一个起始值，其语义跟属性to一样由attributeName决定； 

repeatCount：动画重复次数；

by：相对于当前的指定属性的值(可能是原始值，可能是from指定的值)；与<animateTransform>类似；

4，<animateTransform attributeName="transform" from="0 60 70" to="360 60 70" attributeType="XML" type="rotate" dur="3s" repeatCount="indefinite" by="">变动了目标元素的一个变形属性，从而允许动画控制变形、转换、旋转和斜切；from 和to 的数据表示从角度0旋转到30度，旋转的中心的是 60,70的轴点，重复次数无限；属性by表示相对offset；如果需要使用多个类型的transform可是编写多个<animateTransform>;

a,目标元素，一是由<animateTransform>的属性href指定或者直接父元素；

c,<animateTransform>的属性：必须属性attributeName、type、dur、以及transform的变化；

attributeName：指定响应动画的属性，如'transform'、gradientTransform；在此基础下，attributeType貌似可以是css | xml 也可不定义，可能是因为

attributeType：同<animate>介绍的；transform属性可以是css属性，也可以是xml属性如<g transform="rotate(40)">；

type：转化的类型；可选值 translate | scale | rotate | skewX | skewY | skew；

to：终止状态；<animateTransform dur="5s" attributeName="transform" type="rotate" from="30" to ="80"> 或属性from和to都可以带上旋转点即 from="30 20 20" to ="80 20 20"；因type的不同，to、from、by会有不同形式的值；

from：起始状态；

by：相对于起始值或当前的相关属性的值，如 from="30", by="50“，name本次运动结束时，该属性的值是 from + by; 因此像rotate带有旋转原点的，by会被当to；

values：定义属性values，会忽略属性to和from，by；根据属性type的不同，values的值也不同，如type='rotate'，那么values="30 20 20; 80 20 20"(表示从30°旋转到80°，绕点20,20为原点旋转)；如type="scale" 那values="1;1.5"，换成from、to的话是 from="1" to="1.5"或者by=".5"；

repeatCount：同<animate>等介绍的；

dur：同<animate>等介绍的；没有指定时，动画无效；

calcMode, keyTimes,keySplines的关系，同<animate>等介绍；

5，<filter id='test'>是作为原子滤镜(滤镜元素)操作的容器，它不能直接呈现，因此可以不用放入<defs>元素内，作为其他可呈现元素的过滤器(其他SVG元素通过属性filter引用一个filter滤镜 如<circle filter="url(#test)">); 以及各种滤镜元素；

a,<filter>的属性：

filterUnits：定义属性x,y,height,width的坐标系；可选值 userSpaceOnUse | objectBoundingBox(默认值)；userSpaceOnUse表示filter的属性x,y,width,height等表示引用<filter>的元素所在的用户坐标系的坐标，如第一张图；objectBoundingBox表示filter的属性x,y,width,height等的值是相对于引用元素的边界框的百分比值或分数(以小数表示)，<filter>的偏移也是相对于引用元素的边界框的偏移，以引用元素的边界框建立的坐标系，如<filter width="50%" id="filter" height="20%" x="10%"><rect filter="url(#filter)" width="1000" height="500">，则filter的容器是<rect>宽度的50%即500，相对于<rect>边框偏移了10%即100；两图对比，图1属性x需要移动70个单位，图2属性x相对引用元素移动25个单位；

primitiveUnits：可选值 userSpaceOnUse(默认值) | objectBoundingBox；为filter 基元素(filter primitive elements，处在<filter>元素内的feImage,feDropShadow等)表示长度的属性指定坐标系；userSpaceOnUse表示filter 基元素(feImage,feDropShadow等)表示长度的属性值是引用元素的当前用户坐标系的值；objectBoundingBox表示是引用元素的边界框的百分比或分数，注意取值范围；(<filter>及其基元素是个整体，属性primitiveUnits只是定义<filter>基元素的表示长度的属性的值的单位)；

width：filter容器的宽度；height：filter容器的高度；

x：filter容器的在x轴上偏移量；y：filter容器在y轴上的偏移量；

6，<use xlink:href='#test'  x="20" stroke="red" fill="none">用于复制同个SVG片段下的元素如<circle id="test" cx="10" cy="10" r="20" >，并且可用元素的属性覆盖目标元素的属性; 

a, <use>标签的属性：

href：用于指定被引用元素，该属性是个url，可以是'#id'，

height，width：<use>的高宽度；一般对<use>没有影响，除非被引用元素有指定viewBox属性如标签<symbol>(介绍见26，<symbol>)，<svg>，此时<use>的真正高宽度会根据height和width的值以及被引用元素的viewBox进行调整，如<symbol id="symbol" viewBox="0 0 100 100"><rect width="30" height="30" x="50"/></symbol><use href="#symbol" x=70 stroke="blue" width="60" height="80" fill="none"/>，在UI上看到的是<use>的高宽