<svg width="4cm" height="2cm" viewBox="0 0 400 200" onload="StartAnimation(evt)" version="1.1"> <script type="text/ecmascript"> var timevalue = 0; var timer_increment = 50; var max_time = 5000; var text_element; function StartAnimation(evt) { text_element = evt.target.ownerDocument.getElementById("TextElement"); ShowAndGrowElement(); } function ShowAndGrowElement() { timevalue = timevalue + timer_increment; if (timevalue > max_time) return; // Scale the text string gradually until it is 20 times larger scalefactor = (timevalue * 20.) / max_time; text_element.setAttribute("transform", "scale(" + scalefactor + ")"); // Make the string more opaque opacityfactor = timevalue / max_time; text_element.setAttribute("opacity", opacityfactor); // Call ShowAndGrowElement again <timer_increment> milliseconds later. setTimeout("ShowAndGrowElement()", timer_increment) } window.ShowAndGrowElement = ShowAndGrowElement </script> <rect x="1" y="1" width="398" height="198" fill="none" stroke="blue" stroke-width="2"/> <g transform="translate(50,150)" fill="red" font-size="7"> <text id="TextElement">SVG</text> </g> </svg> |
Original SVG source |