简单之极花费我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 onmousemove='details(evt)' onmouseout='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' onmouseover='cree_texte(evt)' onmouseout='erase_texte(evt)'>hello </text>

<text id='titleswnd' x='300' y='50' fill='black' font-family='Verdana' font-size='10' >hello </text>

</svg>

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