I found a workaround for this problem by using setTimeout() to created the animated textPath as shown in this modified example:
<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; xml:space="preserve" baseProfile="full" version="1.1" onload='Init(evt)'> <path id='path1' d="M0 600L800 0Z" style="stroke: #FF0000; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; "/> <text style="font-family:'Arial';font-size:37px;stroke:#FF0000; fill:#FF0000;"> <textPath xlink:href="#path1" startOffset="0%"> <animate attributeName="startOffset" dur="5s" from="0%" to="100%" repeatCount="indefinite" /> this is text on a path with animate element </textPath> </text> <path id='path2' d="M0 0L800 800Z" style="stroke: #0000FF; stroke-width: 1; stroke-opacity: 1.0; fill: none; stroke-linejoin: round; "/> <text style="fill: #0000FF; font-family: 'Arial', sans-serif; font-size: 37px; "> <textPath id='tp' xlink:href="#path2" startOffset="0%"> text on a path - animate in javascript </textPath> </text> <script type="text/ecmascript"><![CDATA[ var SVGDocument = null; function Init(evt) { SVGDocument = evt.target.ownerDocument; svgNS='http://www.w3.org/2000/svg'; waveText = SVGDocument.getElementById('tp'); wavePath = SVGDocument.getElementById('path2'); setTimeout("moveText()"); } function moveText() { var currentOffset = parseInt(waveText.getAttribute('startOffset')); var newOffset = (currentOffset < 100) ? currentOffset + 2 : 0; waveText.setAttribute('startOffset', newOffset+'%'); setTimeout('moveText()', 100); } ]]></script> </svg> --- In [email protected], "Donna Antle" <Donna.Antle@...> wrote: > > Hi all, > > I have this simple SVG pasted below that draws 2 paths with a textPath on > each path. In one of the textPath elements, I am using an <animate> element > to animate the text string on the line. In the other one, I am creating the > animate element with javaScript in the Init function. When I view this in > Safari, the textPath does not animate when it is added with javaScript, but > works fine added directly as an animate element. All other browsers animate > the textPaths fine when done in javaScript. > Does anyone see any problem with the way I am adding the animate element in > javaScript that would prevent this from working in Safari? > > Thanks, > Donna > > <svg xmlns="http://www.w3.org/2000/svg"; > xmlns:xlink="http://www.w3.org/1999/xlink"; > xml:space="preserve" baseProfile="full" version="1.1" onload='Init(evt)'> > <path id='path1' d="M0 600L800 0Z" > style="stroke: #FF0000; stroke-width: 3; fill: none; stroke-linecap: round; > stroke-linejoin: round; "/> > <text style="font-family:'Arial';font-size:37px;stroke:#FF0000; > fill:#FF0000;"> > <textPath xlink:href="#path1" startOffset="0%"> > <animate attributeName="startOffset" dur="3s" from="0%" to="100%" > repeatCount="indefinite" /> > this is text on a path with animate element > </textPath> > </text> > > <path id='path2' d="M0 0L800 800Z" > style="stroke: #0000FF; stroke-width: 1; stroke-opacity: 1.0; > fill: none; stroke-linejoin: round; "/> > <text style="fill: #0000FF; font-family: 'Arial', sans-serif; font-size: > 37px; "> > <textPath id='tp' xlink:href="#path2" startOffset="0%"> > text on a path - animate in javascript > </textPath> > </text> > > <script type="text/ecmascript"><![CDATA[ > var SVGDocument = null; > function Init(evt) { > SVGDocument = evt.target.ownerDocument; > svgNS='http://www.w3.org/2000/svg'; > newtp = SVGDocument.getElementById('tp'); > var animPointer = SVGDocument.createElementNS(svgNS, 'animate'); > animPointer.setAttributeNS(null, 'attributeName', 'startOffset'); > animPointer.setAttributeNS(null, 'from', '0%'); > animPointer.setAttributeNS(null, 'to', '100%'); > animPointer.setAttributeNS(null, 'dur', '5s'); > animPointer.setAttributeNS(null, 'repeatCount', 'indefinite'); > newtp.appendChild(animPointer); > } > ]]></script> > </svg> > ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
