foreignobject in svg

Question

How to change the height and width of textarea (or any html element) from javascript which is inside foreign object in svg.Moreover, can I drag an html elelment and drop on svg container by any mean (htm5 any hint) or atleast can I get the coordinates on svg during draging so that I can implement my own drag and drop. Thanks in advance

Answer 1

You appear to my eye to have at least two distinct questions. If I understand correctly, the first one is something like this: how can you write JavaScript within an SVG instance so that you can embed the SVG instance and have the JS control the embedding HTML? Do I have that right?

If so, the answer can be constructed from the parts of http://phaseit.net/examples/SVG4/c1.html and related examples. Briefly, write "window.top" to reach the HTML reference.

The same sort of reference gives access to HTML5 drag-and-drop, if that's what you're after.

Is that the level of answer you're after, or do you need an executable example?

LATER, AFTER MORE DISCUSSION: it appears that http://phaseit.net/examples/SVG5/embedding.svg is more like what you're after. Do I have that right, Arslan Ahson? What you should see when you display the SVG instance there is an SVG-coded elliptical button which, when pushed, toggles the appearance (background color and width) of a nearby embedded HTML textarea.