时间戳

首页 > 解决方案 > svg中的响应式图像

css - svg中的响应式图像

问题描述

TL; DR：是否可以根据通过img标签包含的 svg 中的媒体查询加载其他图像？

我生成了一堆 svg 文件，其中包含带有文本和图标的表格。PDF 在语义上将是一个更好的容器，但我需要将此类“文档”保留为图像以进行无缝嵌入/预览，它可能无法解决我的问题。所以这个故事是关于图标的。

我编写了内联样式，其中媒体查询选择了与用户屏幕 DPI 相对应的图标。图标已经捆绑到精灵中，所以我使用pattern/image[xlink:href]+ fill:url(#id)。当我将 svg 直接嵌入 HTML（DOM 岛）时，一切都按需要工作。img但是如果我通过标签（即）嵌入 svg <img src="foo.svg">，它根本不会加载图标，更​​不用说显示它们了。

我知道，我可以通过数据 URL 嵌入图标，但是为所有支持的屏幕 dpi 嵌入图标似乎太多了。具有讽刺意味的是，图标是光栅图标，很难矢量化像素艺术，所以我不能为所有 DPI 设置一组图标。

有没有办法让媒体查询选择正确的图标而不嵌入它们？

标签： csssvgmedia-queriesembedded-resource

解决方案

您不能从<img>标签中使用的 SVG 加载外部文件（或在其他“图像”上下文中使用，如 CSS 背景图像）。出于安全和性能原因，用作图像的 SVG 必须像任何其他图像一样运行——单个文件，没有辅助资源，也没有脚本。

如果您不想使用内联 SVG，您可以考虑嵌入带有<object>标签的 SVG 文件或<iframe>. 但是，我建议您实际仔细测试以查看浏览器是否正在下载图像文件，即使它们因为 CSS 而没有使用它们。

推荐阅读