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

need help with making two svg objects from one

Expand Messages
  • foofoo1900
    Hi, For a project I m working on I need to have two vortex spirals rotating in the opposite direction next to each other: @@ I found a great implementation of
    Message 1 of 4 , Nov 8, 2010
      Hi,

      For a project I'm working on I need to have two vortex spirals rotating in the opposite direction next to each other: @@
      I found a great implementation of one vortex spiral in svg here:
      http://chriswjohnson.blogspot.com/2008/08/you-are-getting-sleepy-very-sleeeepy.html
      the direct link to the svg file is:
      http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg

      I'm stuck at trying to figure out how to make this svg object appear twice, next to each other. Simply copying the contents of the file twice doesn't seem to do the trick. I suppose there can be only one container per svg file. Any ideas or RTFM pointers?

      Of course if you have a double vortex svg already available that would be even better!

      Thank you for your help.
    • patrickdengler
      This is VERY COOL. There are a couple of ways you could expirement. Probably the easiest I can think of is iframe two of them (don t use object), put the SVG
      Message 2 of 4 , Nov 20, 2010
        This is VERY COOL.

        There are a couple of ways you could expirement. Probably the easiest I can think of is iframe two of them (don't use object), put the SVG contents inline into html or XHTML, pass in the direction &direction=1 as a param differently for each iframe.

        Patrick Dengler
        Internet Explorer
        SVG WG

        --- In svg-developers@yahoogroups.com, "foofoo1900" <foofoo1900@...> wrote:
        >
        > Hi,
        >
        > For a project I'm working on I need to have two vortex spirals rotating in the opposite direction next to each other: @@
        > I found a great implementation of one vortex spiral in svg here:
        > http://chriswjohnson.blogspot.com/2008/08/you-are-getting-sleepy-very-sleeeepy.html
        > the direct link to the svg file is:
        > http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg
        >
        > I'm stuck at trying to figure out how to make this svg object appear twice, next to each other. Simply copying the contents of the file twice doesn't seem to do the trick. I suppose there can be only one container per svg file. Any ideas or RTFM pointers?
        >
        > Of course if you have a double vortex svg already available that would be even better!
        >
        > Thank you for your help.
        >
      • foofoo1900
        Thank you, Patrick! I ll try your suggestion!
        Message 3 of 4 , Nov 29, 2010
          Thank you, Patrick! I'll try your suggestion!

          --- In svg-developers@yahoogroups.com, "patrickdengler" <patrickdengler@...> wrote:
          >
          > This is VERY COOL.
          >
          > There are a couple of ways you could expirement. Probably the easiest I can think of is iframe two of them (don't use object), put the SVG contents inline into html or XHTML, pass in the direction &direction=1 as a param differently for each iframe.
          >
          > Patrick Dengler
          > Internet Explorer
          > SVG WG
          >
          > --- In svg-developers@yahoogroups.com, "foofoo1900" <foofoo1900@> wrote:
          > >
          > > Hi,
          > >
          > > For a project I'm working on I need to have two vortex spirals rotating in the opposite direction next to each other: @@
          > > I found a great implementation of one vortex spiral in svg here:
          > > http://chriswjohnson.blogspot.com/2008/08/you-are-getting-sleepy-very-sleeeepy.html
          > > the direct link to the svg file is:
          > > http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg
          > >
          > > I'm stuck at trying to figure out how to make this svg object appear twice, next to each other. Simply copying the contents of the file twice doesn't seem to do the trick. I suppose there can be only one container per svg file. Any ideas or RTFM pointers?
          > >
          > > Of course if you have a double vortex svg already available that would be even better!
          > >
          > > Thank you for your help.
          > >
          >
        • Charles McCathieNevile
          On Tue, 30 Nov 2010 01:11:08 +0100, foofoo1900 ... I took an alternative approach (because building two iframes and so on seemed really
          Message 4 of 4 , Nov 30, 2010
            On Tue, 30 Nov 2010 01:11:08 +0100, foofoo1900 <foofoo1900@...>
            wrote:

            > Thank you, Patrick! I'll try your suggestion!

            I took an alternative approach (because building two iframes and so on
            seemed really complicated to me.

            I opened the SVG, and looked at it in Dragonfly, which showed me the path
            used to create the spiral. Export DOM and I have an SVG element.

            Double the width, make the path a def, and <use> it twice side by side
            with clipping to suit. (As a child of the 70's I would make them round...)

            Set an animation for the rotate (although that doesn't work in IE9 so you
            should use fakeSMIL or something).

            To get the direction change I would like to use a <set> and animate the by
            attribute of the animation, but I don't know if that works because I
            didn't worry about trying it.

            (This is similar to using <set> for script-free buttons. One button is
            drawn over the other, and I <set> display none when it is clicked, ending
            when the button underneath gets clicked. Then I can trigger whatever else
            I want from the clicking of the two buttons. Or cascade them for multiple
            states, which isn't that much harder. It's nothing special, but it stops
            me writing javascript which is generally a good idea ;) ).

            cheers

            Chaals

            > --- In svg-developers@yahoogroups.com, "patrickdengler"
            > <patrickdengler@...> wrote:
            >>
            >> This is VERY COOL.
            >>
            >> There are a couple of ways you could expirement. Probably the easiest
            >> I can think of is iframe two of them (don't use object), put the SVG
            >> contents inline into html or XHTML, pass in the direction &direction=1
            >> as a param differently for each iframe.
            >>
            >> Patrick Dengler
            >> Internet Explorer
            >> SVG WG
            >>
            >> --- In svg-developers@yahoogroups.com, "foofoo1900" <foofoo1900@> wrote:
            >> >
            >> > Hi,
            >> >
            >> > For a project I'm working on I need to have two vortex spirals
            >> rotating in the opposite direction next to each other: @@
            >> > I found a great implementation of one vortex spiral in svg here:
            >> >
            >> http://chriswjohnson.blogspot.com/2008/08/you-are-getting-sleepy-very-sleeeepy.html
            >> > the direct link to the svg file is:
            >> > http://homepage.mac.com/chriswjohnson/automatons/rotating-spiral-1.svg
            >> >
            >> > I'm stuck at trying to figure out how to make this svg object appear
            >> twice, next to each other. Simply copying the contents of the file
            >> twice doesn't seem to do the trick. I suppose there can be only one
            >> container per svg file. Any ideas or RTFM pointers?
            >> >
            >> > Of course if you have a double vortex svg already available that
            >> would be even better!
            >> >
            >> > Thank you for your help.
            >> >
            >>
            >
            >


            --
            Charles McCathieNevile Opera Software, Standards Group
            je parle français -- hablo español -- jeg lærer norsk
            http://my.opera.com/chaals Try Opera: http://www.opera.com
          Your message has been successfully submitted and would be delivered to recipients shortly.