Add TextArea input element inside SVG

1,066 views
Skip to first unread message

rup...@thoughtworks.com

unread,
Dec 3, 2015, 1:20:27 AM12/3/15
to d3-js
Hello,
         I wish to append an input element field inside SVG element. We are using D3js for interactive data visualisation. 
We tried to append HTML input box using foreignObject. While editing, when text goes beyond the width of textBox, text starts appearing anywhere on canvas and focus gets lost. 
Has anyone faced or heard  this problem?  We are looking for textArea functionality instead of textBox. 
Any help is appreciated. 

Regards,
Rupali

Marc Fawzi

unread,
Dec 3, 2015, 1:27:45 PM12/3/15
to d3...@googlegroups.com
Hi Rupali,

ForeignObject remains broke i guess. The general solution to all problems with Foreign Object is to layer the HTML on top of the SVG rather than try to fit it into the SVG document node. You can use absolute positioning, transparent background etc and keep it in sync with the SVG position wise as you animate 

Sent from my iPhone
--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages