foreignObject styling

Tom Herold

unread,

Apr 24, 2013, 10:12:33 AM4/24/13

to d3...@googlegroups.com

Hi,

I have an SVG containing multiple foreignObjects with HTML inside. I would like to style these foreignObjects elements like you would any other SVG element by adding a border ("stroke") and a background color ("fill"), maybe round the corners. According to the W3C (http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement) the foreignObject element supports "style". However I am unable to style it in any way.

Am I missing something? Has anyone ever played around with this?

Best regards,

Tom

Ian Johnson

unread,

Apr 24, 2013, 1:42:12 PM4/24/13

to d3...@googlegroups.com

foreignObjects are notoriously hard to work with. I abandoned them when chrome wouldn't update an input element after scrolling my page.

you can do other things like style a containing element or put a div inside your foreignElement and style that. best of luck!

--
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/groups/opt_out.

--
Ian Johnson - 周彦

http://enja.org

Tom Herold

unread,

Apr 25, 2013, 7:56:23 AM4/25/13

to d3...@googlegroups.com

Any thoughts on what could be a good container element? A group ("g") does not seem to do the trick.

Styling the HTML div itself is what I am doing now. I felt awkward when doing that... That is why I am looking for another solution.

Jim McCusker

unread,

Apr 25, 2013, 8:58:27 AM4/25/13

to d3-js

My RDF viewer relies pretty heavily on foreignobject and styling the HTML inside:

http://tw.rpi.edu/web/tool/vraer

Feel free to poke around. It's not code demo quality source code (it does a lot of different things), but it might be helpful.

Jim

Jim McCusker
Programmer Analyst
Krauthammer Lab, Pathology Informatics
Yale School of Medicine
james.m...@yale.edu | (203) 785-4436
http://krauthammerlab.med.yale.edu

PhD Student
Tetherless World Constellation
Rensselaer Polytechnic Institute
mcc...@cs.rpi.edu
http://tw.rpi.edu

John Delacour

unread,

Apr 25, 2013, 5:29:13 PM4/25/13

to d3...@googlegroups.com

On 24/4/13 at 15:12, hero...@gmail.com (Tom Herold) wrote:

>I have an SVG containing multiple foreignObjects with HTML
>inside. I would like to style these foreignObjects elements
>like you would any other SVG element by adding a border
>("stroke") and a background color ("fill"), maybe round the
>corners. According to the W3C (
><http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement>)
>the foreignObject element supports "style". However I am unable
>to style it in any way.

Provided you have a <body> or <html> element in your foreign
object, you can apply the styles you want. In the code below
you can substitute 'html' for 'body' thoughout with similar results.

<svg width="500" height="500" version="1.1"
xmlns = 'http://www.w3.org/2000/svg'>
<style>
.loud {
color:red;
font-family:verdana, sans-serif;
font-size:16pt;
}
body{
padding: 0.5em;
background-color:beige;
border:solid;
}
</style>
<rect x="10" y="10" width="100" height="100"
stroke="navy" fill="darkorchid" />
<g class="loud">
<foreignObject y="110"
width="14em" height="5em">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here are two squares</p>
</body>
</foreignObject>
</g>
<rect x="10" y="222" width="100" height="100"
stroke="saddlebrown" fill="gold" />
</svg>

Reply all

Reply to author

Forward