本文共 2781 字,大约阅读时间需要 9 分钟。
想要实现的动画效果,两个对象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也要讲技巧的。
转载地址:http://wpqbi.baihongyu.com/