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

Newbie:Accessing Image Element

Expand Messages
  • JOHN KIRBY
    I have created a svg gauge image comprised of two images; the background gauge and the foreground needle. I want to at runtime be able to rotate the
    Message 1 of 4 , Aug 26, 2008
    • 0 Attachment
      I have created a svg gauge image comprised of two images; the
      "background" gauge and the "foreground" needle. I want to at runtime
      be able to rotate the needle based upon data passed to it.

      Below is an example of the needle image element snippet

      <image transform="translate(95,0) rotate(-20,30,125)"
      overflow="visible" enable-background="new " width="58" height="250"
      xlink:href="data:image/png;base64, .......

      I could use brute force by XSLT on the svg and repaint the canvas. I
      assume there is a more eloquent programatic way in batik by getting a
      reference to the image element, perform the the rotate and do a repaint?

      Example would be greatly appreciated :-)

      .j
    • ddailey
      Take a look at http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg it s being done in three different ways here. cheers David ... From: JOHN KIRBY
      Message 2 of 4 , Sep 1, 2008
      • 0 Attachment
        Take a look at http://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg
        it's being done in three different ways here.

        cheers
        David
        ----- Original Message -----
        From: JOHN KIRBY
        To: svg-developers@yahoogroups.com
        Sent: Tuesday, August 26, 2008 10:13 AM
        Subject: [svg-developers] Newbie:Accessing Image Element


        I have created a svg gauge image comprised of two images; the
        "background" gauge and the "foreground" needle. I want to at runtime
        be able to rotate the needle based upon data passed to it.

        Below is an example of the needle image element snippet

        <image transform="translate(95,0) rotate(-20,30,125)"
        overflow="visible" enable-background="new " width="58" height="250"
        xlink:href="data:image/png;base64, .......

        I could use brute force by XSLT on the svg and repaint the canvas. I
        assume there is a more eloquent programatic way in batik by getting a
        reference to the image element, perform the the rotate and do a repaint?

        Example would be greatly appreciated :-)

        .j




        [Non-text portions of this message have been removed]
      • G. Wade Johnson
        On Tue, 26 Aug 2008 08:13:25 -0600 ... Take a look at the instrumentation demo I did a few years ago. It has some JavaScript for animating several different
        Message 3 of 4 , Sep 1, 2008
        • 0 Attachment
          On Tue, 26 Aug 2008 08:13:25 -0600
          JOHN KIRBY <jjkirby@...> wrote:

          > I have created a svg gauge image comprised of two images; the
          > "background" gauge and the "foreground" needle. I want to at
          > runtime be able to rotate the needle based upon data passed to it.
          >
          > Below is an example of the needle image element snippet

          Take a look at the instrumentation demo I did a few years ago. It has
          some JavaScript for animating several different kinds of
          instrumentation.

          http://anomaly.org/wade/projects/instruments/index.html

          A free running demo is shown at

          http://anomaly.org/wade/projects/instruments/Instruments.svg

          G. Wade

          > <image transform="translate(95,0) rotate(-20,30,125)"
          > overflow="visible" enable-background="new " width="58"
          > height="250" xlink:href="data:image/png;base64, .......
          >
          > I could use brute force by XSLT on the svg and repaint the canvas.
          > I assume there is a more eloquent programatic way in batik by getting
          > a reference to the image element, perform the the rotate and do a
          > repaint?
          >
          > Example would be greatly appreciated :-)
          >
          > .j


          --
          "I can only conclude that I'm paying off karma at a vastly accelerated
          rate." -- Ivanova, "Points of Departure"
        • JOHN KIRBY
          Wade Thanks!. I forgot to mention this was a Batik/swing application. So what I did is use DOM manipulation to replace the transform attribute in the SVG. ...
          Message 4 of 4 , Sep 2, 2008
          • 0 Attachment
            Wade Thanks!.

            I forgot to mention this was a Batik/swing application. So what I did
            is use DOM manipulation to replace the transform attribute in the SVG.

            On Sep 1, 2008, at 8:49 AM, G. Wade Johnson wrote:

            > On Tue, 26 Aug 2008 08:13:25 -0600
            > JOHN KIRBY <jjkirby@...> wrote:
            >
            > > I have created a svg gauge image comprised of two images; the
            > > "background" gauge and the "foreground" needle. I want to at
            > > runtime be able to rotate the needle based upon data passed to it.
            > >
            > > Below is an example of the needle image element snippet
            >
            > Take a look at the instrumentation demo I did a few years ago. It has
            > some JavaScript for animating several different kinds of
            > instrumentation.
            >
            > http://anomaly.org/wade/projects/instruments/index.html
            >
            > A free running demo is shown at
            >
            > http://anomaly.org/wade/projects/instruments/Instruments.svg
            >
            > G. Wade
            >
            > > <image transform="translate(95,0) rotate(-20,30,125)"
            > > overflow="visible" enable-background="new " width="58"
            > > height="250" xlink:href="data:image/png;base64, .......
            > >
            > > I could use brute force by XSLT on the svg and repaint the canvas.
            > > I assume there is a more eloquent programatic way in batik by
            > getting
            > > a reference to the image element, perform the the rotate and do a
            > > repaint?
            > >
            > > Example would be greatly appreciated :-)
            > >
            > > .j
            >
            > --
            > "I can only conclude that I'm paying off karma at a vastly accelerated
            > rate." -- Ivanova, "Points of Departure"
            >
            >



            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.