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

programmatically generating animation

Expand Messages
  • kam
    Can anyone tell me why this works (chrome10, safari5)
    Message 1 of 2 , Jan 1, 2011
      Can anyone tell me why this works (chrome10, safari5)

      <html>
      <body>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="250" cy="250" r="200" style="fill:red; stroke:blue; stroke-width:5"><animateColor attributeName="fill" from="#ff0000" to="#00ff00" dur="5s" fill="freeze"></animateColor>
      </circle>
      </svg>
      </body>
      </html>

      but this doesn't?

      <html>
      <body>
      <script>(function(){var svgns = 'http://www.w3.org/2000/svg';
      var xlinkns = 'http://www.w3.org/1999/xlink';
      var svg = document.createElementNS(svgns,'svg');
      svg.setAttribute("xmlns", svgns);
      svg.setAttributeNS("xmlns", "xlink", xlinkns);
      var circle = document.createElementNS(svgns,'circle');
      circle.setAttributeNS(null,'cx','250');
      circle.setAttributeNS(null,'cy','250');
      circle.setAttributeNS(null,'r','200');
      circle.setAttributeNS(null,'style','fill:red;stroke:blue;stroke-width:5');
      var animateColor = document.createElementNS(svgns,'animateColor');
      animateColor.setAttributeNS(null,'attributeName','fill');
      animateColor.setAttributeNS(null,'from','#ff0000');
      animateColor.setAttributeNS(null,'to','#00ff00');
      animateColor.setAttributeNS(null,'dur','5s');
      animateColor.setAttributeNS(null,'fill','freeze');
      circle.appendChild(animateColor);
      svg.appendChild(circle);
      document.body.appendChild(svg);
      })();
      </script>
      </body>
      </html>
    • Robert Longson
      Hi, If you replace the rather pointless animateColor element by an animate element (same attributes) then both examples work in Firefox 4. Best regards Robert.
      Message 2 of 2 , Jan 3, 2011
        Hi,

        If you replace the rather pointless animateColor element by an animate element (same attributes) then both examples work in Firefox 4.

        Best regards

        Robert.

        --- In svg-developers@yahoogroups.com, "kam" <kamkasravi@...> wrote:
        >
        > Can anyone tell me why this works (chrome10, safari5)
        >
        > <html>
        > <body>
        > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="250" cy="250" r="200" style="fill:red; stroke:blue; stroke-width:5"><animateColor attributeName="fill" from="#ff0000" to="#00ff00" dur="5s" fill="freeze"></animateColor>
        > </circle>
        > </svg>
        > </body>
        > </html>
        >
        > but this doesn't?
        >
        > <html>
        > <body>
        > <script>(function(){var svgns = 'http://www.w3.org/2000/svg';
        > var xlinkns = 'http://www.w3.org/1999/xlink';
        > var svg = document.createElementNS(svgns,'svg');
        > svg.setAttribute("xmlns", svgns);
        > svg.setAttributeNS("xmlns", "xlink", xlinkns);
        > var circle = document.createElementNS(svgns,'circle');
        > circle.setAttributeNS(null,'cx','250');
        > circle.setAttributeNS(null,'cy','250');
        > circle.setAttributeNS(null,'r','200');
        > circle.setAttributeNS(null,'style','fill:red;stroke:blue;stroke-width:5');
        > var animateColor = document.createElementNS(svgns,'animateColor');
        > animateColor.setAttributeNS(null,'attributeName','fill');
        > animateColor.setAttributeNS(null,'from','#ff0000');
        > animateColor.setAttributeNS(null,'to','#00ff00');
        > animateColor.setAttributeNS(null,'dur','5s');
        > animateColor.setAttributeNS(null,'fill','freeze');
        > circle.appendChild(animateColor);
        > svg.appendChild(circle);
        > document.body.appendChild(svg);
        > })();
        > </script>
        > </body>
        > </html>
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.