陆-SVG矢量图形学习进阶
承接上篇： [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://blog.lenton.cn/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://blog.lenton.cn/" 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://blog.lenton.cn/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>
未完待续。。
参与讨论