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] ------------------------------------ ----- 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/
