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

Re: How to manipulate SVG DOM tree: locate items & insert nodes?

Expand Messages
  • krellksa100
    OK, thanks David.
    Message 1 of 6 , Jun 10, 2013
    • 0 Attachment
      OK, thanks David.

      --- In svg-developers@yahoogroups.com, "David Dailey" <ddailey@...> wrote:
      >
      > The SVG Primer at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
      > explains how to do that sort of thing in JavaScript. I would assume that
      > Java methods for manipulating SVG DOM would be similar.
      >
      >
      >
      > The Apache Batik project at http://xmlgraphics.apache.org/batik/ probably
      > has information a bit more closely matched to your needs.
      >
      >
      >
      > Good luck
      >
      > David
      >
      >
      >
      > From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
      > On Behalf Of krell Krellis
      > Sent: Tuesday, May 28, 2013 12:56 PM
      > To: svg-developers@yahoogroups.com
      > Subject: [svg-developers] How to manipulate SVG DOM tree: locate items &
      > insert nodes?
      >
      >
      >
      >
      >
      > I have a specific requirement to add a label to an SVG component that is on
      > the canvas within an SVG editor tool.
      > And not being a DOM / SVG expert, I have got a bit stuck.
      >
      > The flow I am trying to achieve is this:
      > - user drops a component onto the canvas (derived from a rectangle-type item
      > from an SVG file)
      > - user selects the component with the mouse
      > - user clicks on 'Add Label' toolbar button
      > - code is invoked to add the label to the component
      >
      > The
      > label will consist of a simple line with a disc (filled circle) fixed
      > to one end of the line, and the disc should sit underneath a text
      > element representing the label text to be shown: a simple numeric
      > sequence number from one upwards. The disc, text and end of the line
      > underneath should be able to be dragged into another position by the
      > user.
      >
      > The other end of the line should appear underneath the
      > centre-point of the selected component, and this end should remain fixed
      > at that position and never move.
      >
      > Think of 'call-out'
      > lines/labels in the old 'Haynes' car maintenance manuals (or Bosch power
      > tool technical sheets), and this is what I'm trying to achieve.
      > The numbers shown on the discs map to a table showing the part number the
      > label/call-out is attached to.
      >
      > I have mocked this up in Adobe Illustrator and it all seems to work ok.
      > In
      > the mock up, after setting the Z-order/layer positions as I want them, I
      > grouped all the items, including the label elements and the main
      > component itself.
      > Then, to move the disc end of the line, I selected
      > the 'Direct selection tool' in Illustrator, dragged over the disc and
      > label text, and part of the line, but not the over the component.
      > This worked and I could drag the disc end anywhere I wanted.
      > One
      > point that I
      > noticed was that in Illustrator when moving the line near the centre of
      > the component to which it refers to, the word 'anchor' was displayed,
      > but I don't know if this is relevant, as I suspect this may not be
      > relevant. I think the grouping of the items, combined with the use of
      > the direct selection tool to select the disc end of the line, was the
      > signifant factor in allowing the line/disc/label to be moved.
      >
      > Now
      > I want to traverse the DOM document programmatically from Java (not
      > javascript), identify the selected component, then wrap it in a
      > '<g>' (group?) element, along with the line, the disc and the text
      > label in the correct order, and then insert the final closing
      > '</g>' node to mark the end of the grouping, to mimic the
      > behaviour in the Illustrator mock up.
      >
      > If anyone can help with
      > this, I would be more than grateful, as I have an approaching deadline a
      > few days from now, which cannot be moved.
      >
      > See more details in the
      > attached image, as it should help understand what I'm trying to do.
      >
      > Thanks a lot, and I just hope someone knowledgeable can answer before my
      > deadline approaches :(
      >
      > [Non-text portions of this message have been removed]
      >
      >
      >
      >
      >
      > [Non-text portions of this message have been removed]
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.