Share this Page URL

Chapter 5. Creating Navigation Bars > Simple Navigation Bars - Pg. 82

Creating Navigation Bars fill="freeze"/> <animate begin="MouseTest.mouseover" dur="0.1s" attributeName="stroke" from="white" to="red" fill="freeze"/> <animate begin="MouseTest.mouseout" dur="0.1s" attributeName="stroke" from="red" to="white" fill="freeze"/> </text> </a> </svg> 82 To achieve the desired effect, the mouseover must apply when anything within the <a> element is moused. Just add an id attribute to the <a> element (in this case, MouseTest ), and use that id attribute as part of the value of the begin attribute for all mouseover effects. Thus, the following syntax means that when anything within the <a> element is moused, the mouseover effect begins: begin='MouseTest.mouseover' To achieve different color changes on the text and on the rectangle, you need separate animations nested within the <text> and <rect> elements, respectively. The first pair of <animate> ele- ments within the <text> element changes the fill from white to red (and back again on mouseout); the second pair of <animate> elements changes the stroke property. The <animate> element nested within the <rect> element changes its fill property on mouseover and changes it back on mouseout. You could have used the <set> animation element in a way similar to what you read about earlier for achieving a similar effect. These animations are very simple. You can combine color changes like these with slight changes