简单之极花费我n长时间的svg动画效果

想要实现的动画效果，两个对象A 和B， B为文字， A为文字或其他。 当鼠标进出A对象时， B的文字进行更改。

思路是给A添加onmouseover, onmouseout事件，在事件中通过getElementbyId('b')来取得B对象，然后修改B。

一开始想通过javascript层面的DOM来获取B，window.parent.document.getElementById('b').value='xxx'

但是在FireFox中有效，IE中根本就纹丝不动。

而且总感觉兜了个大圈。

 

后来仔细google，想起另一个途径，svg自身的DOM体系来获得和修改A 和B对象.但是语法不熟，不停的google，找到一个站点（http://pilat.free.fr/english/routines/js_dom.htm），有很多svg dom方面的例子，在其中找到个类似的例子，

<?xml version='1.0' encoding='iso-8859-1'?>
<svg width='400' height='400'>
<script><![CDATA[
var chaine='Move mouse over letters ...';
function details(evt)
{svgdoc=evt.target.ownerDocument;xm=evt.clientX;ym=evt.clientY;
objet=svgdoc.getElementById('texte');d=objet.getStartPositionOfChar(1);
d.x=xm;d.y=ym;p=objet.getCharNumAtPosition(d);f=objet.getExtentOfChar(p);
affichage='You are on character '+chaine.substring(p,p+1);
objet2=svgdoc.getElementById('lettre');titre=objet2.firstChild;
titre.setData(affichage);objet=svgdoc.getElementById('contour');
objet.setAttribute('x',f.x);objet.setAttribute('y',f.y);
objet.setAttribute('width',f.width);objet.setAttribute('height',f.height)}
function zero(evt)
{svgdoc=evt.target.ownerDocument;
objet=svgdoc.getElementById('contour');objet.setAttribute('x',0);objet.setAttribute('y',0);
objet.setAttribute('width',0);objet.setAttribute('height',0);
objet=svgdoc.getElementById('lettre');titre=objet2.firstChild;
affichage='You are on character ';titre.setData(affichage)}
]]></script>
<rect id='contour' x='0' y='0' width='0' height='0' style='stroke:green;fill:yellow'/><g id='affiche'>
<text οnmοusemοve='details(evt)' οnmοuseοut='zero(evt)' id='texte' x='200' y='100' style='text-anchor:middle;font-size:24;font-family:Arial;fill:red'>
Move mouse over letters ...</text>
<text id='lettre' x='20' y='250' style='text-anchor:start;font-size:16;fill:blue'>You are on character </text>
</g>
</svg>
其中的关键就是每个脚本函数的第一句，获得SVG的DOM，svgdoc=evt.target.ownerDocument。

另外要修改text对象的值，用setData（‘参数’）就行了。

 

参照着写出我的例子：

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg width='400' height='400' >
<script>
<![CDATA[
function cree_texte(evt)
{
svgdoc=evt.target.ownerDocument;
objet2=svgdoc.getElementById('titleswnd');
titre=objet2.firstChild;
titre.setData('in');
}

function erase_texte(evt)
{
svgdoc=evt.target.ownerDocument;
objet=svgdoc.getElementById('titleswnd');
titre=objet.firstChild;
titre.setData('out');}
]]>
</script>
<text id='demo' x='300' y='20' fill='black' font-family='Verdana' font-size='10' οnmοuseοver='cree_texte(evt)' οnmοuseοut='erase_texte(evt)'>hello </text>
<text id='titleswnd' x='300' y='50' fill='black' font-family='Verdana' font-size='10' >hello </text>
</svg>

 

总结：语言都是有规则的，一定要条理清楚，逻辑分明，想清楚该怎么做，不要无头苍蝇般胡乱拼凑，企图凑出结果。google也要讲技巧的。