0

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 设置一组图标。

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

4

2 回答 2

4

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

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

于 2018-12-07T03:44:02.113 回答
0

因此，由于不可能有条件地加载：无论是否嵌入，我都应该对栅格集进行一些巧妙的检测。从技术上讲，这不是直接的答案，但以防万一有人需要。

我决定和饼干一起去。人们通常访问托管这些 SVG 的同一站点。我会为他们的 DPI 设置一个 cookie，然后所有提供的 SVG 都会选择正确的 DPI 图像。对于尚未访问该站点的人，我会选择 UA 嗅探：手机和 Mac 获得 2 倍，其他 1 倍。或者每个人都只有 1 倍。

于 2018-12-07T10:01:52.583 回答