How can i make text editable inside SVG node.

[sandeshp...@gmail.com]

I am having a structure some what like this

<svg x="534.720996869109" y="188.402300350323">
      <g x="534.720996869109" y="188.402300350323" width="100" height="100">
            <rect width="200" height="34" fill="none" stroke="#000" stroke-width="2"/>
            <text x="10" y="24" font-size="24px" font-family="sans-serif" fill="#36AA0B" contentEditable="true">Monsoon</text>
      </g>
</svg>

I want text to be editable .But even after adding attribute contentEditable="true" i am not able to make the text editable.

If i add text to body text editing is working but if i add to svg node its not working.
What is the solution for it??

[Eric Forgy]

Hi,

I had a similar problem. The "contentEditable" is only for HTML and doesn't work for SVG, so you have two options:

1. Include HTML in your SVG using foreignObject
2. Find/build an SVG widget that allows editable text

1 is easier. 

Best of luck,

Eric

[Ian B]

Be wary I don't think foreignObject is that well supported in some browsers like IE, so it may depend a bit on the target audience.

I'm wondering if you could overlay HTML text element over it.

[Laurent Cerveau]

I did use foreignObject, but bumped into a bug in Webkit where (if I remember correctly) using it was crashing if the object coordinates were not in absolute position from the main HTML frame

(if you search in Google for "foreignObject Webkit crash” you’ll get some references).. So if the object is appearing/disappearing and is not “always on the screen” this requirers an additional bits of manipulation.

Otherwise it was pretty simple with code like

   svgContainer.append("foreignObject").attr("x",this.inspectorX+startX).attr("y",this.inspectorY+startY).attr("width",140).attr("height",40).attr("id","XtagValueInput").append("xhtml:form").append("xhtml:input").attr("type","text").attr("id","tagValueInput").on("click", function(d,i) {d3.event.stopPropagation();});

laurent

 

--
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.

Laurent Cerveau 

Technical CEO

Nephorider

http://www.nephorider.com

[Eric Forgy]

By the way, I said 1 is easier, but when I came across the same problem, I decided to build my own. I put it online just now: 

• http://jsfiddle.net/eforgy/ppoakf0k/ 

I hope it is helpful and if anyone can improve it, it would be a good learning experience for me. I would be happily surprised if it worked on other browsers, but it should work on Chrome at least.

Best regards,

Eric