Re: load 2 svg file into 1 svgCanvas

[Cameron McCormack]

Hi Peppe.

Peppe:
> Hi, i have to load 2 svg file into a canvas...then, through a slider, i would
> modify canvas' opacity to visualize a time svg file 1 another time svg file
> 2...are there a method to solve this?

Do you want to fade between one SVG document and another?  What about
having a single document loaded in the canvas, something like:

  <svg xmlns='http://www.w3.org/2000/svg'
       xmlns:xlink='http://www.w3.org/1999/xlink'
       width='400' height='350'>

    <image id='i1' width='400' height='300' xlink:href='one.svg'/>
    <image id='i2' width='400' height='300' xlink:href='two.svg'/>

    <!-- some elements that act like a slider, which somehow call
         onSliderChange when changed -->
    ...

    <script><![CDATA[
      i1 = document.getElementById('i1');
      i2 = document.getElementById('i2');
      
      function set(n) {
        i1.style.opacity = (1 - n);
        i2.style.opacity = n;
      }

      function onSliderChange(e) {
        var sliderPercentage = ...; // based on current slider position
        set(sliderPercentage);
      }

      set(0);
    ]]></script>
  </svg>

This would change the opacity of the two image elements to fade between
them.

-- 
Cameron McCormack, http://mcc.id.au/
        xmpp:[EMAIL PROTECTED]  ▪  ICQ 26955922  ▪  MSN [EMAIL PROTECTED]

---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]