inline svg - how to apply browser default styles to xhtml in foreignObject?

Question

i have an inline svg with foreignObject elements which contain xhtml fragments. however, the xhtml content is improperly styled due to crosstalk from styles set through js in the svg and its parent html document (namely the jqtouch library). thus i'd like to apply the browser default styles to the children of my foreignObjects. therefore i need to reference the browser default style sheet. does anybody know how to do this ? for safari i could probably take it from the webkit sources but i'd prefer a solution that doesn't require keeping track of modifications after a browser upgrade.

using the native svg text elements is not an option as automatic word wrapping is mandatory. neither is ...

• moving the inline svg subtree out of the toplevel css scope.
• modifying the offending toplevel css (in fact, modifying every css selector and adding a unique css class to every element outside the foreignObjects might become an option, if it can be done programmatically and efficiently. hopefully there is a more elegant solution ?)

platform: safari 5.0.3 ( 7533.19.4 ) win xp sp3

thanks in advance for your efforts

best regards, carsten

Answer 1

I guess the default styles will be applied only if you embed the xhtml as a whole document with head body etc