Support for foreignObject in snap.svg?

1,547 views
Skip to first unread message

Patrick Hund

unread,
Dec 10, 2013, 6:49:17 AM12/10/13
to sna...@googlegroups.com
Hello snap forum members,

one well-known limitation of the SVG format is that it doesn't support line-wrapping in texts, so if I want to put a large text block in an SVG image, I need to line-wrap it "by hand", by adding a text element for each line. One well-known workaround for this limitation is using a foreignObject element to insert HTML code, e.g. a p or div containing the text, in the SVG.

Alas, when I use snap.svg to load an SVG file with a foreignObject element, it seems to ignore these elements, and I could not find a way to add a foreignObject.

Is there a way to do this, or is support for foreignObject planned for snap.svg?

Cheers,
Patrick

tkkah...@gmail.com

unread,
Feb 18, 2014, 6:31:25 AM2/18/14
to sna...@googlegroups.com
Foreignobject support would be very welcome.

Ian

unread,
Feb 18, 2014, 7:07:24 AM2/18/14
to sna...@googlegroups.com
Feels a bit hacky, but how about something like... http://svg.dabbles.info/snaptut-fobject.html its probably not what you want for proper support included with other files/elements I know, but may give some idea.

var s = Snap("#svgout"); 

var fobjectSVG = '<svg><foreignObject width="80" height="200"><body><p>Here is a paragraph that requires word wrap</p></body></foreignObject></svg>';

var p = Snap.parse( fobjectSVG );

var g = s.group().append( p );

g.animate({ transform: 't300,0r45,50,50' }, 2000);


Ian


piedmontlong

unread,
Dec 11, 2014, 11:37:09 PM12/11/14
to sna...@googlegroups.com
IE doesn't support foreignObject. How about Snap handle inserting HTML tags in SVG?

Ian

unread,
Dec 12, 2014, 2:32:41 AM12/12/14
to sna...@googlegroups.com
I suspect you may need to keep them separate and just have html and svg in separate layers over each other. It depends if there is something svg specific you are trying to do with it.

I'm not sure there's any direct workaround really if IE doesn't actually support it. A use case may be helpful on a fiddle or something.

bay...@gmail.com

unread,
Dec 12, 2014, 3:17:14 AM12/12/14
to sna...@googlegroups.com
Is there a way to convert that html text to svg text and keep that word wrapping?

Ian

unread,
Dec 12, 2014, 4:46:08 AM12/12/14
to sna...@googlegroups.com
Which version of IE are we talking about btw, looking at http://caniuse.com/#search=foreignobject it seems to imply it would work in IE9 (but I've read some posts that indicate otherwise I think).

Ian

unread,
Dec 12, 2014, 6:22:00 AM12/12/14
to sna...@googlegroups.com
Hmm yep does look poorly supported in IE. It would be worth hearing some use cases to maybe see if there are some interesting workarounds, as I think it something that would be good to be able to mix html and svg more freely.

piedmontlong

unread,
Dec 12, 2014, 9:23:12 AM12/12/14
to sna...@googlegroups.com
I think this is a good idea. I heard someone used HTML5 feature to add a layer with z-index and HTML tags over a svg panel (rectangle). I want to create a kind of JavaScript panel to display texts in svg.

bay...@gmail.com

unread,
Dec 13, 2014, 5:04:27 AM12/13/14
to sna...@googlegroups.com
What about  splitting the string into multiple strings(200px for the line width for example) and putting them in an array, and then
feeding each item( line)  with an increasing Y offset
from the start point of your first line?!

Marco Dings

unread,
Dec 15, 2014, 12:23:00 PM12/15/14
to sna...@googlegroups.com
As for the topic of multiline text, a nice solution is described here

https://github.com/adobe-webplatform/Snap.svg/issues/159

Be like me, be Carbon free - don't print this and save a tree
IMPORTANT: The contents of this email and any attachments are confidential. They are intended for the named recipient(s) only. If you have received this email by mistake, please notify the sender immediately and do not disclose the contents to anyone or make copies thereof.

bay...@gmail.com

unread,
Dec 16, 2014, 6:48:19 AM12/16/14
to sna...@googlegroups.com
Thank you Marco, That is very useful. Do you happen to have that more developed in a format that you could auto wrap text based on a given width?!
Reply all
Reply to author
Forward
0 new messages