概述
svg支持鼠标单击、鼠标移动和鼠标按下，动画，脚本响应事件。
svg支持鼠标事件的例子：
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="350" cy="350" r="100" stroke="black"
stroke-width="2" fill="red">
<set attributeName="fill" form="red" to="green" begin="mouseover" end="mouseout" />
<set attributeName="r" from="100" to="200" begin="mousedown" end="mouseup"/>
</circle>
</svg>
讲解：在这个例子中，set作为一个动画的设置，主要的属性：attributeName，是它父节点图形结构中已经配置的属性。from,to配置属性的变化边界。begin,end配置属性变化的开始时间和结束时间。
svg鼠标事件例子
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect id="changeToRed" x="20" y="20" width="25" height="25" rx="5"
ry="5" style="fill:lightgrey"/>
<text x="50" y="35" font-size="14">Move over for red text</text>
<rect id="bigText" x="20" y="60" width="25" height="25" rx="5"
ry="5" style="fill:lightgrey"/>
<text x="50" y="75" font-size="14">Move over for big text</text>
<rect id="bigRedText" x="20" y="100" width="25" height="25" rx="5"
ry="5" style="fill:lightgrey"/>
<text x="50" y="115" font-size="14">Click me for big red text</text>
<text id="changingText" x="250" y="100" font-size="30"
fill="black">Change me
<set attributeName="fill" from="black" to="red"
begin="changeToRed.mouseover" end="changeToRed.mouseout"/>
<set attributeName="font-size" from="14" to="50"
begin="bigText.mouseover" end="bigText.mouseout"/>
<set attributeName="font-size" from="14" to="50"
begin="bigRedText.click" end="bigRedText.mouseout"/>
<set attributeName="fill" from="black" to="red"
begin="bigRedText.click" end="bigRedText.mouseout"/>
</text>
</svg>
在这个例子中，仔细观察他们的区别就会发现。begin，end与上个例子的不一样。
动画的效果示例
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="350" cy="350" r="100" stroke="black"
stroke-width="2" fill="red">
<animate attributeName="opacity" from="1" to="0" begin="mouseover" dur="5s"/>
</circle>
</svg>
本例子中的动画效果是透明度效果逐渐在加强，当5秒钟结束后恢复到初始状态。开始时间是鼠标移动到图像上。从这个例子中可以看到，只要是svg图形的属性都可以做出渐变的效果。
这个动画效果也可以是多个一起变化。
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="350" cy="350" r="100" stroke="black"
stroke-width="2" fill="red" >
<animate attributeName="opacity" from="1" to="0" begin="mouseover" dur="5s"
/>
<animate attributeName="r" from="100" to="300" begin="mouseover" dur="10s"/>
</circle>
</svg>
这两个动画效果会在一个动作中体现。
下面是线性渐变的例子
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,255);
stop-opacity:1"/>
</linearGradient>
</defs>
<circle cx="200" cy="190" r="100"
style="fill:url(#orange_red)"/>
</svg>
分析：
在使用线性渐变的时候，首先要提供线性渐变的一个集合，或者是定义一个线性变化的区间。用defs标签去定义它。
在使用的时候，要以url（#id）的形式或者样子去调用线性渐变集合。在线性渐变集合中，要定义两个要素，第一个要素是起始边界。第二个是终止边界。
放射性渐变的例子
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="75%" fy="75%">
<stop offset="0%" style="stop-color:rgb(255,0,0);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<circle cx="230" cy="200" r="100"
style="fill:url(#grey_blue)"/>
</svg>
说明：在图形当中cx，cy，r属性会定义一个圆形的边界，这个边界是终止渐变的边界。fx，fy会定义一个点，这个点将会是渐变的起始点。实际上放射性渐变的范围是从起始点到边界的范围。
<radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 circle 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置
。
svg的动画效果示例：
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Simple transform animations</title>
<defs>
<style type="text/css"><![CDATA[
.touchable { fill: orange; stroke: none; }
.touchable:hover { stroke: black; stroke-width: 0.2cm; }
]]></style>
</defs>
<circle class="touchable" cx="1cm" cy="1cm" r="1cm">
<animateTransform attributeName="transform"
attributeType="XML"
type="scale" from="1" to="5"
begin="0s" dur="8s"
fill="freeze" />
</circle>
<circle class="touchable" cx="1cm" cy="10cm" r="2cm">
<animateTransform attributeName="transform"
attributeType="XML"
type="translate" from="1" to="500"
begin="0s" dur="12s"
fill="freeze" />
</circle>
</svg>
svg的animateTransform的type属性有translate，scale，rotate，skewX，skewY这个中。type这个属性是需要声明的，如果没有设置这个属性的话，默认属性为translate。form,by,to属性的值设置对不同type是一样：
type="translate"，平动:每个单独的属性设置都是以 <tx>,或者[<tx>,<ty>]
type="scale"，缩放：每个单独的属性值为<sx>,或者[<sx>,<sy>]
type="rotate",旋转：每个单独的属性值设置为<rotate-angle>,或者附加转动中心[<cx><cy>]
type="skewX"和type="skewY",斜交：每个单独的属性设置为<skew-angle>
下面是一个缩放的例子
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="200" height="100">
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="2" dur="5s" additive="replace" fill="freeze"/>
</rect>
</svg>
但是下面的例子结果与上面的相同
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="200" height="100">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0" to="90" dur="5s" additive="replace" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="2" dur="5s" additive="replace" fill="freeze"/>
</rect>
</svg>
分析结果：由于设置了additive为replace，它会不断替换前面的动画效果。
但是修改过后的样子，运动的样子是复合在一起的。
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="200" height="100">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0" to="15" dur="1s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="1" to="2" dur="1s" additive="sum" fill="freeze"/>
</rect>
</svg>
可设置循环播放次数的动画例子
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="200" height="100">
<animateTransform attributeName="transform" attributeType="XML" type="scale"
from="2" to="3" repeatCount="3" dur="4s" fill="freeze"/>
</rect>
</svg>
repeatCount为循环次数，dur为每次循环的持续时间
对象的旋转
<?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="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css"><![CDATA[
.touchable { fill: orange; stroke: none; }
.touchable:hover { stroke: black; stroke-width: 0.2cm; }
]]></style>
</defs>
<circle cx="300" cy="200" r="4cm"/>
<circle class="touchable" cx="1cm" cy="10cm" r="2cm">
<animateMotion
path="M300,200 a100,100 0 1,0 -100,100 a100,100 0 0,0 100,-100"
dur="20s" rotate="auto" repeatCount="indefinite"/>
</circle>
</svg>
这是圆周运动的的例子，实际上这是一个物体对象沿着一个路径的运动的方式。
下面的例子是脚本版的控制
<?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 version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
οnlοad="animate(evt)"
>
<title>SVG example with scripted animation</title>
<defs>
<style type="text/css"><![CDATA[
#target { fill: black; }
]]></style>
<script type="application/javascript"><![CDATA[
var target;
var cx = 0;
var cx_increment = 2;
var redness_increment = 8;
var redness = 0;
var speed = 60;
var maxwidth = 600;
var maxredness = 250;
function animate(evt) {
target = document.getElementById("target");
setTimeout("advance()", speed);
}
function advance() {
cx += cx_increment;
if ( cx > maxwidth || cx < 0 )
cx_increment = -cx_increment;
else
target.setAttribute("cx", cx);
redness += redness_increment;
if ( redness > maxredness || redness < 0 )
redness_increment = -redness_increment;
else
target.style.setProperty("fill", "rgb(" + redness + ",0,0)", "important");
setTimeout("advance()", speed);
}
]]></script>
</defs>
<circle id="target" cx="3cm" cy="3cm" r="2cm"/>
</svg>
在svg中添加脚本或者css，都需要这样的格式<script type="application/javascript"><![CDATA[ ]]></script>或者<style type="text/css"><![CDATA[ ]]></style>。这些格式当中type是可以修改的。
最后
以上就是快乐大雁为你收集整理的javascript SVG的动画，脚本，事件的全部内容，希望文章能够帮你解决javascript SVG的动画，脚本，事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复