1

I would like to insert namespaced (X)HTML inside SVG. The XHTML DOM nodes exist, I can script them, but the don't seem to render. Is there a way to achieve this?

I need it mainly as a workaround for line-wrapping of text that is AFAIK missing in SVG (see my question Auto line-wrapping in SVG text)

Community
  • 1
  • 1
tillda
  • 18,150
  • 16
  • 51
  • 70

2 Answers2

1

Using <foreignObject> is the answer. http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/

tillda
  • 18,150
  • 16
  • 51
  • 70
  • 1
    Without it, the SVG renderer jsut can't figure out where to display the text. Thus, foreignObject is necessary. – Tangui Feb 14 '11 at 11:00
1

If you want wider compatibility, go for (x)html as the main document (most script libraries don't support being used directly from SVG documents, jQuery is one example) and include svg either inline or via <object> depending on what you need to do.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Actually... jQuery does support it. There are just minor annoyances with classes (whether you're using it in an SVG, XHTML or HTML5 document) and they can be easily fixed. – fregante Jul 08 '11 at 13:27
  • Thanks, I should have another look at that then. Last time I tried jQuery in an svg document jQuery didn't initialize properly (due to missing body tags and whatnot). – Erik Dahlström Jul 08 '11 at 14:20
  • Another thing is the lack of "readydom" event support, so you should use something like: `$(window).bind('svgload', doStuff);` – fregante Jul 08 '11 at 18:29