inline svg - 如何将浏览器默认样式应用于foreignObject中的xhtml？

Posted 2023-03-17

【中文标题】inline svg - 如何将浏览器默认样式应用于foreignObject中的xhtml？

【英文标题】：inline svg - how to apply browser default styles to xhtml in foreignObject?

【发布时间】：2011-07-20 17:12:27

【问题描述】：

我有一个带有 foreignObject 元素的内联 svg，其中包含 xhtml 片段。但是，由于 svg 及其父 html 文档（即 jqtouch 库）中通过 js 设置的样式的串扰，xhtml 内容的样式不正确。因此我想将浏览器默认样式应用于我的foreignObjects 的孩子。因此我需要参考浏览器默认样式表。有人知道怎么做这个吗 ？对于 safari，我可能会从 webkit 源中获取它，但我更喜欢在浏览器升级后不需要跟踪修改的解决方案。

使用本机 svg 文本元素不是一种选择，因为自动换行是强制性的。 也不是...

将内联 svg 子树移出*** css 范围。 修改有问题的*** css （其实就是修改每一个css选择器，给外面的每一个元素添加一个唯一的css类 foreignObjects 可能会成为一种选择，如果它可以以编程方式和有效地完成。 希望有更优雅的解决方案？）

平台： 野生动物园 5.0.3 ( 7533.19.4 ) 赢xp sp3

提前感谢您的努力

最好的问候，卡斯滕

【问题讨论】：

请注意，即使您包含了 UA 样式表，您仍然不会被重置；您需要将每种样式显式硬重置回基线。

暂时我求助于从 webkit 源中引用一个克隆的默认样式表，我在所有选择器前面加上“foreignObject”。至少它有效......

【参考方案1】：

我猜只有当您将 xhtml 作为一个带有头部主体等的整个文档嵌入时才会应用默认样式

【讨论】：

不幸的是他们没有。 dom 将嵌入的 xhtml 视为普通的子树，无论它是完整的文档还是片段。

在这种情况下，您可以尝试将自定义强制重置 css 应用于外来对象子项