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

OK, thanks David.

--- In [email protected], "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: [email protected] [mailto:[email protected]]
> On Behalf Of krell Krellis
> Sent: Tuesday, May 28, 2013 12:56 PM
> To: [email protected]
> 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]
>




------------------------------------

-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    [email protected] 
    [email protected]

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/