Loading ...
Sorry, an error occurred while loading the content.

Re: Problem animating a textPath in Safari with javaScript

Expand Messages
  • Donna Antle
    I found a workaround for this problem by using setTimeout() to created the animated textPath as shown in this modified example:
    Message 1 of 2 , Mar 27, 2012
    • 0 Attachment
      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 svg-developers@yahoogroups.com, "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>
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.