Re: SVG12: DOM-based animation

Hello www-svg,

>   In http://www.w3.org/TR/2005/WD-SVGMobile12-20050413/animate.html
> section 16.3 the example does not actually demonstrate how to animate
> SVG content using the SVG DOM, it rather demonstrates animation using
> the UDOM/uDOM/µDOM/Micro DOM/SVG DOM Subset/... *and* abuse of SMIL
> animation elements.

Its not 'abuse' - it runs an animation, which has no visual effect, but
captures the repeat events and uses those from script.

>  Such abuse of language features is inappropriate
> for W3C specifications. Please change the draft such that it does not
> abuse such features and be consistent about how this animation is
> achieved.


However, we agree that using SMIL animation to illustrate
non-SMIL-animation is not as clear as it might be, and have rewritten
the example to not do this.

> This will likely require adding facilities such as SVGTimer
> to SVG Tiny 1.2 as otherwise such animation is hardly possible.

Here is the example as it stands now.

<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="2cm" viewBox="0 0 400 200" id="root"
     xmlns:ev="http://www.w3.org/2001/xml-events"   
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <desc>A simple animation using the uDOM and the SVGTimer interface of the uDOM.</desc>
  <script type="application/ecmascript"><![CDATA[
    var timeValue = 0;
    var timerIncrement = 50;
    var maxTime = 5000;
    var textElement;
    var svgRoot;
    var mytimer;
    
    function init() {
      textElement = document.getElementById("svgtext");
      svgRoot = document.getElementById("root");
      launchTimer();
    }

        function launchTimer() {
            mytimer = createTimer();
            // Fire timer event as soon as possible
            mytimer.delay = 0;
            // Timer event must be sent every 50 ms
            mytimer.interval = 50;
            // This instruction is clear enough, isn't it ?
            mytimer.start();
        }

    function showAndGrowElement() {
      timeValue += timerIncrement;
      // Scale the text string gradually until it is 20 times larger
      scalefactor = (timeValue * 20.) / maxTime;
      var matrix = createSVGMatrixComponents(scalefactor, 0, 0, scalefactor, 0, 0);
      textElement.setMatrixTrait("transform", matrix);
      // Make the string more opaque
      var opacityFactor = timeValue / maxTime;
      textElement.setFloatTrait("fill-opacity", opacityFactor);
      
      if (timeValue >= maxTime)
        mytimer.stop();
    }
  ]]></script>
  
  <handler type="application/ecmascript" ev:event="load">
        init();
  </handler>
  
  <handler type="application/ecmascript" ev:event="timer">
        if (evt.target == mytimer)
        {
        showAndGrowElement();
        }
  </handler>

  <rect x="1" y="1" width="398" height="198" fill="none" stroke="blue" stroke-width="2"/>
  <g transform="translate(50,150)" font-size="7" stroke="none">
    <text fill="red" fill-opacity="0" id="svgtext">SVG</text>
  </g>
  
</svg>

Please let us know within two weeks if this response does not resolve
your question.
  

-- 
 Chris Lilley                    mailto:chris@w3.org
 Chair, W3C SVG Working Group
 W3C Graphics Activity Lead
 Co-Chair, W3C Hypertext CG

Received on Monday, 24 October 2005 23:27:01 UTC