svg基础 6 动画和交互性

• 控制属性

　　即使在 SVG 产生以前，动画和交互性已经在 Web 上确立了牢固的地位。尽管实现可能较复杂，但是概念很简单：更改对象属性值，对象本身看起来就会改变。例如，给 x 坐标增加 50 个像素，对象就会向右移动 50 个像素。

　　SVG 图像具有相同的概念，但实现却简单得多，这是由于这些能力从开始就构建到语言中。SVG 定义了专用于动画的五种元素：

animate： 该元素指定一个特定属性（通过 attributeName 属性），其值在 dur 属性指定的时间内从指定为 from 属性的值变成指定为 to 属性的值。repeatCount 属性指定动画发生多少次。要使动画无限运行，请将 repeatCount 的值设置为 indefinite。动画适用于包含它的元素，因此下面的代码：

<rect x="50" y="50" width="100" height="100"
fill="none" stroke="purple">
<animate attributeType="CSS" attributeName="stroke-width"
from="1" to="50" dur="5s" repeatCount="indefinite" />
</rect>

　　创建一个正方形，其 stroke-width 逐渐增厚到 50 像素，然后变回到 1 个像素，并再次开始循环。

　 　animateMotion：该元素提供一种通过指定路径移动元素的简单方法。路径数据与路径元素的 d 属性相同，但用路径元素指定。也可以用 xlink:href 将它链接到 animateMotion 元素。起点和终点由 from 和 to 属性确定，并且可以通过将 rotate 值设为 auto 来设置对象垂直对齐于路径。（也可以将 rotate 属性设为 auto-reverse 以将这个方位改变 180 度。或者可以给定一个特定角度）。如动画和交互性所示：

<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
dur="8s" repeatCount="indefinite" rotate="auto" />

　　animateColor：该元素提供在一段时间内更改元素颜色的方法。例如，要创建一个在 8 秒钟内由红色变成蓝色的圆：

<circle cx="250" cy="100" r="50" fill="red">
<animateColor attributeType="CSS" attributeName="fill"
from="rgb(255,0,0)" to="rgb(0,0,255)" dur="8s"
repeatCount="indefinite"/>
</circle>

　　animateTransform：该元素在一段时间内执行变换。请记住，这些变换影响整个坐标系统，因此简单地缩放一个矩形还会导致矩形位置的变化。下面的示例不但缩放矩形，还逐渐将它返回到类似位置：

<rect x="333" y="49" width="50" height="50" fill="none"
stroke="purple">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="0,0" to="-222,-45" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</rect>

　　set：剩下的这个元素可以很容易地设置一个元素在指定时间段内的特殊属性。例如：

<circle cx="250" cy="100" r="50" fill="red">
<set attributeName="r" to="100" begin="1s" dur="5s" fill="remove" />
</circle>

• 事件的脚本编制

　　象 HTML 页面一样，可以设置 SVG 图像以捕获某些事件（如点击鼠标和滚动），并用它们启动脚本。在构建简单 SVG 图像时，可以通过属性捕获这些事件。最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、 onmouseout、onload、onresize、 onunload 和 onrepeat。

　　当这些事件之一被触发，就可以将事件对象本身提供给脚本，脚本反过来再用它确定哪个对象触发了该事件（也就是点击了什么对象）。然后脚本可以操纵那个对象的特性，如它的属性。

　　这一示例回到了图案示例，但在此例中，当用户点击椭圆时，其填充由白色变为使用图案。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<desc>Scripting the onclick event</desc>
<defs>

<script type="text/ecmascript">
<![CDATA[
function hideReveal(evt) {
var imageTarget = evt.target;
var theFill = imageTarget.getAttribute("fill");
if (theFill == 'white')
imageTarget.setAttribute("fill", "url(#notes)");
else
imageTarget.setAttribute("fill", "white");
}
]]>
</script>

<pattern id="notes" x="0" y="0" width="50" height="75"
patternTransform="rotate(15)"
patternUnits="userSpaceOnUse">

<ellipse cx="10" cy="30" rx="10" ry="5"/>
<line x1="20" y1="30" x2="20" y2="0"
stroke-width="3" stroke="black"/>
<line x1="20" y1="0" x2="30" y2="5"
stroke-width="3" stroke="black"/>

</pattern>
</defs>

<!-- Outline the drawing area with a blue line -->
<rect x="1" y="1" width="350" height="200" fill="none" stroke="blue"/>

<ellipse οnclick="hideReveal(evt)" cx="175" cy="100" rx="125" ry="60"
fill="url(#notes)" stroke="black" stroke-width="5"/>


</svg>



————————

结束语

• 可伸缩向量图形概述

　　可伸缩向量图形（SVG）图像是一种使用基于 XML 的文本信息创建图像的方法。这些图像可以由简单的形状（如矩形、圆）或用数学方法指定的更复杂的路径组成。然后可以将这些图像嵌入在 Web 页面中，SVG 查看器可以在那里解释它们。

　　可以通过滤镜操纵属于 SVG 图像一部分的对象，以允许复杂的成像效果并且为动态创建的图形和动画提供基础。