当通过 Vaadin 请求处理程序提供服务时,Internet Explorer 忽略在 SVG 文件中导入的 CSS

标签 css internet-explorer svg vaadin

我有一个用于显示 svg 文件的 Vaadin 小部件。这些 svg 文件可以导入 css 文件和图像。而 css 文件除了可以引用样式外,还可以引用一些字体文件。

为了提供所有这些文件,我实现了自定义 Vaadin RequestHandler 并将其添加到 session 中。

为了在我的小部件中包含 svg,我测试了多项内容:对于 Firefox 和 Chrome,嵌入 svg 作为 iframe 的 src 工作正常。我也尝试了 jquery-addon jquery-svg,这里也没有问题。

但是,在 Internet Explorer 上(我使用的是 IE11,也尝试过低至 IE9 的兼容模式),这两种方法都会导致相同的问题: svg 已正确加载。所有图像都正确加载。 css 文件被正确请求和提供,我检查了响应,它符合预期。但是,CSS 内容完全被忽略了。既没有对引用字体文件的任何进一步请求,也根本没有应用文件中的 css 规则。

我测试了将相同的 svg 文件及其资源作为静态资源放在服务器上(例如,在 VAADIN 文件夹中),或者放在它们自己的上下文中,并且内容在所有浏览器上加载得很好,问题只发生通过 session RequestHandler 提供文件时。

我还尝试将 css 文件的内容复制到 svg 文件本身,而不使用 @import。同样,即使使用 RequestHandler,这也能正常工作,但我宁愿将 css 和 svg 分开。

这里有没有人有这方面的经验或遇到过类似的问题?

谢谢,

马蒂亚斯

最佳答案

我通过比较响应发现了问题:缺少响应的 contentType。它是为静态资源自动设置的,但我必须在 Vaadin 请求处理程序中手动设置。 (感谢安德烈)

关于当通过 Vaadin 请求处理程序提供服务时,Internet Explorer 忽略在 SVG 文件中导入的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31401246/

相关文章:

css - 无法在 div 中垂直对齐此文本

javascript - 另一个附加子项在 IE 中不工作

html - 每次重复的 SVG 动画延迟

javascript - 使用 d3.js 对 .svg 文件中的路径进行动画处理

ios - iPad 上的 CSS 灵活框布局

html - 样式选择在 Chrome 或 Firefox 上显示不一样

javascript - 使用适用于 IE 的 Ajax 进行文件发布

javascript - 填充svg宽度路径中的空间

css - 子选择器——哪个是第一个、最后一个和最后一个?

javascript - getElementById 仅在停用缓存时在 Internet Explorer 中工作