承接上篇： [05天]SVG矢量图形学习 

上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。

本篇是进阶内容，将会对svg的滤镜，动画，事件等等各特性做介绍说明。如果对svg还没有做过了解，请先阅读上篇。

各元素包含属性内容较多，为了文章体积，并未全部展开介绍。

SVG 图形元素

<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

上篇没有说的是<image>,<use>元素

<image>元素

image：在svg中使用位图。专有属性如下：

x：图像水平方向上到原点的距离

y：图像竖直方向上到原点的距离

width：图像宽度。和 HTML 的 <img> 不同，该属性是必须的

height：图像高度。和 HTML 的 <img> 不同，该属性是必须的

href (en-US) 或 xlink:href (en-US)：图像的 URL 指向

preserveAspectRatio：控制图像比例

 示例：

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image
    x="0" y="0"
    height="50" width="50"
    xlink:href="http://ccued.com/zb_users/upload/2017/01/201701081483861883115788.jpg"
  />
</svg>

<text>与<textPath> 元素

上篇中已经介绍了text元素，与之相关的textPath可以使文字可以跟随path路径书写。

示例：

<svg width="100%" height="100%" viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <path id="MyPath"
        d="M 100 200
            C 200 100 300   0 400 100
            C 500 200 600 300 700 200
            C 800 100 900 100 900 100" />
  </defs>
  <text font-family="Verdana" font-size="42.5">
  <textPath xlink:href="#MyPath">
    这是一个关于text与textPath的示例demo
  </textPath>
  </text>
</svg>

效果如下：

<use> 元素

元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到use元素的位置 

 示例：

  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <g id="Port">
        <circle style="fill:inherit" r="10"/>
      </g>
    </defs>
    <use x="10" y="10" xlink:href="#Port" />
    <use x="50" y="50" xlink:href="#Port" />
   </svg>

use元素使用属性xlink:href来链接id为Port的元素。

SVG 容器元素 

 <a>, <defs>, <g>, <marker>, <mask>, <pattern>

<a>元素

该元素包裹的图形元素将做为一个超链接。

示例：

<svg width="140" height="30"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://ccued.com/" target="_blank">
    <rect height="30" width="120" y="0" x="0" rx="15"/>
    <text fill="white" text-anchor="middle" y="21" x="60">CCUED.COM</text>
  </a>
</svg>

<defs>元素

defs元素用于嵌入可在SVG映像内重用的定义。可以将SVG形状组合在一起, 并将其作为单个形状重复使用。

在defs元素中定义的图形元素不会直接呈现。比如可以用<use>元素呈现这些元素 。可以参见上方<use>元素示例。

如本文中介绍过的mask,marker,pattern等等。

<g>元素

该元素用于编组。添加在g元素上的变换和属性会被其所有的子元素继承。

 示例：

<svg width="100%" height="100%" viewBox="0 0 95 50"
  xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
  <circle cx="25" cy="25" r="15" />
  <circle cx="40" cy="25" r="15" />
  <circle cx="55" cy="25" r="15" />
  <circle cx="70" cy="25" r="15" />
  </g>
</svg>

<marker>元素

marker元素可以给path,line,polyline,polygon元素的开始或结尾添加一个标记。

比如箭头：

  <svg width="120" height="120" viewBox="0 0 120 120"
      xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5"
          markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
    </defs>
    <polyline points="10,90 50,80 90,20" fill="none" stroke="black"
        stroke-width="2" marker-end="url(#Triangle)" />
  </svg>

<mask>元素

这是一个蒙板。与css中的mask类似。mask元素中的图形将做为蒙板对元素进行遮罩。

如果没听懂，直接看示例：

<svg width="500" height="120">
  <defs>
    <mask id="mask1" x="0" y="0" width="100" height="100">
      <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)" />
</svg>

<pattern>元素

pattern用来预定义图形，对一个对象进行填充或描边时，可使用这个图形。

示例：

<svg width="240" height="160">
  <defs>
    <pattern id="p" patternUnits="userSpaceOnUse" width="60" height="60">
      <rect width="30" height="30" fill="#f99" x="0" y="0"></rect>
    </pattern>
  </defs>
  <rect width="240" height="160" stroke="#aaa" fill="url(#p)" />
</svg>

效果如下：

svg滤镜元素

<filter>滤镜容器元素

滤镜有：

<feBlend>,<feColorMatrix>,<feComponentTransfer>,<feComposite>,<feConvolveMatrix>,<feDiffuseLighting>,<feDisplacementMap>,<feDropShadow>,<feFlood>,<feFuncA>,<feFuncB>,<feFuncG>,<feFuncR>,<feGaussianBlur>,<feImage>,<feMerge>,<feMergeNode>,<feMorphology>,<feOffset>,<feSpecularLighting>,<feTile>,<feTurbulence>

<feBlend>： 将两个对象通过只定的mode混合模式进行混合。

注：关于mode的值，参阅：https://developer.mozilla.org/zh-CN/docs/Web/CSS/blend-mode

提供一个示例：

<svg width="300" height="150" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
          flood-color="green" flood-opacity="1"/>
      <feBlend in="SourceGraphic" in2="floodFill" mode="overlay"/>
    </filter>
  </defs>
  <defs>
    <image 
    x="5"
    y="5"
    width="80"
    height="80"
    id="image"
    xlink:href="http://ccued.com/zb_users/upload/2017/01/201701081483861883115788.jpg"></image>
  </defs>
  <use 
    x="-50"
    y="0"
    xlink:href="#image" 
  ></use>
  <use 
    x="50"
    y="0"
    xlink:href="#image" 
    style="filter:url(#spotlight);"
  ></use>
</svg>

效果如下，左侧为原图，右侧为用了滤镜：

滤镜较多，全展开介绍篇幅巨大。如需了解可查阅

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feBlend

svg动画元素

<animate>，<animateColor>，<animateMotion>，<animateTransform>，<discard>，<mpath>，<set>

<animate>

先看一个方到圆变换的示例体验一下动画：

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
  </rect>
</svg>

一些关键属性：

动画时间属性 begin、dur、end、min、max、restart、repeatCount、repeatDur、fill

动画取值属性 calcMode、values、keyTimes、keySplines、from、to、by

其它动画属性 attributeName、additive、accumulate

begin,end

这组属性规定了动画的开始和结束时间。可选的值有：

offset-value: 可以是一个时间值，如 2s

syncbase-value ：可以是一个动画衔接，如 animate1.end， animate2.begin

event-value: 可以通过事件来开始或结束动画。包括的事件有：

focusin、focusout、activate、click、mousedown、mouseup、mouseover、mousemove、mouseout、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsertedIntoDocument、DOMAttrModified、DOMCharacterDataModified、SVGLoad、SVGUnload、SVGAbort、SVGError、SVGResize、SVGScroll、SVGZoom、beginEvent、endEvent 和 repeatEvent

repeat-value：描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。

accessKey-value：当用户按下指定的键时

wallclock-sync-value：真实世界钟的时点。时点的句法遵守 ISO8601

dur

动画的持续时长，如2s.或者使用格式时间：hh:mm:ss.iii 

min,max

动画的最小最大持续时长。

restart

动画重新开始的方式，有如下值

always | whenNotActive | never

repeatCount

动画重复的次数，值可以是正整数或一直重复："indefinite"

repeatDur

动画重复的时长，值可以是时间，如2s；或一直重复："indefinite"

fill

动画结束时，是否保留当前动画帧状态。有两个值：remove移除动画效果 | freeze 停留在当前动画效果帧。

综合示例：

<svg width="100" height="100" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="100" height="100" fill="green">
    <animate id="animate" attributeName="rx" dur="2s" max="5s" values="0;50;0" repeatCount="indefinite"></animate>
  </rect>
</svg>

写不动了，休息一下

svg字体元素

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

svg渐变元素

<linearGradient>, <meshgradient>, <radialGradient>, <stop>

未完待续。。