Simple and extremely costly SVG Animation

To achieve the animation effect, the two objects A and B, B are text, and A is text or other. When the mouse moves in and out of object A, the text of object B is changed.

The idea is to add an onmouseover and onmouseout event to A. In the event, get the B object through getelementbyid ('B') and modify B.

When I first thought about using the domon on the criptlayer to get B, retrieve parent.doc ument. getelementbyid ('B'). value = 'xxx'

However, it is valid in Firefox, and IE does not work.

And I always feel like a big circle.

 

Later, Google thought of another way: SVG's DOM system to obtain and modify objects A and B. but the syntax is not familiar, keep Google, find a site (http://pilat.free.fr/english/routines/js_dom.htm), there are many examples of SVG Dom, find a similar example in it,

<? XML version = '1. 0' encoding = 'iso-8859-1 '?>
<SVG width = '000000' Height = '000000'>
<SCRIPT> <! [CDATA [
VaR chaine = 'move mouse over letters ...';
Function details (EVT)
Using svgdoc=evt.tar get. ownerdocument; XM = EVT. clientx; ym = EVT. clienty;
Objet = svgdoc. getelementbyid ('text'); 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'); titer = objet2.firstchild;
Titer. setdata (affichage); objet = svgdoc. getelementbyid ('totalur ');
Objet. setattribute ('x', F. X); objet. setattribute ('y', F. Y );
Objet. setattribute ('width', F. width); objet. setattribute ('height', F. Height )}
Function zero (EVT)
Using svgdoc=evt.tar get. ownerdocument;
Objet = svgdoc. getelementbyid ('totalur '); objet. setattribute ('x', 0); objet. setattribute ('y', 0 );
Objet. setattribute ('width', 0); objet. setattribute ('height', 0 );
Objet = svgdoc. getelementbyid ('lettre'); titer = objet2.firstchild;
Affichage = 'you are on character '; titer. setdata (affichage )}
]> </SCRIPT>
<Rect id = 'Total' x = '0' y = '0' width = '0' Height = '0' style = 'stroke: green; fill: yellow '/> <G id = 'affiche'>
<Text onmousemove = 'details (EVT) 'onmouseout = 'zero (EVT)' Id = 'text' x = '000000' y = '000000' style = 'text-anchor: middle; font-size: 24; font-family: Arial; fill: red'>
Move mouse over letters... </text>
<Text id = 'lettre' x = '20' y = '000000' style = 'text-anchor: Start; font-size: 16; fill: blue '> you are on character </text>
</G>
</SVG>
The first sentence of each script contains the domand svgdoc1_evt.tar get. ownerdocument of svg.

In addition, you can use setdata ('parameter') to modify the value of the Text object.

 

Write my example as a reference:

<? 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 = '000000' Height = '000000'>
<SCRIPT>
<! [CDATA [
Function cree_texte (EVT)
{
Svgdoc=evt.tar get. ownerdocument;
Objet2 = svgdoc. getelementbyid ('titleswnd ');
Titer = objet2.firstchild;
Titer. setdata ('in ');
}

Function erase_texte (EVT)
{
Svgdoc=evt.tar get. ownerdocument;
Objet = svgdoc. getelementbyid ('titleswnd ');
Titer = objet. firstchild;
Titer. setdata ('out ');}
]>
</SCRIPT>
<Text id = 'Demo' x = '000000' y = '20' fill = 'black' font-family = 'verdana 'font-size = '10' onmouseover = 'cree _ texte (EVT) 'onmouseout = 'erase _ texte (EVT) '> Hello </text>
<Text id = 'titleswnd' x = '000000' y = '50' fill = 'black' font-family = 'verdana 'font-size = '10'> Hello </ text>
</SVG>

 

Conclusion: The Language is well-organized and logically clear. You need to be clear about how to do this. Do not splice the results without a head-on fly. Google also needs skills.