0

我刚刚开始使用内联 SVG 在资源密集的网站上显示图像。但是，我也有一个使用 switch 和 foreignobject 标签的后备，这样旧的浏览器应该只在它的位置显示一个 png 图像。

这是最基本的 - 在 html 中的内联 svg 中有更多细节- 如何优雅地降级？

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xml:space='preserve'
  width="100" height="100">
<switch>
<g>
<!-- the svg goes here -->
</g>
<foreignObject width="100" height="100">
<img src="/some_image.png"/>
</foreignObject>
</switch>
</svg>

我认为这会减轻服务器上的负载——例如，对于一个有 4 个图像的页面，浏览器可以一次性获取所有内容，而不是 5 次访问服务器，1 次访问页面，1 次访问每个 img 标记。

然而，现在我已经部署了这个解决方案，我发现（通过检查服务器日志）浏览器实际上正在处理外来对象标签内的 img 请求，无论它们是否可以处理 SVG。

换句话说，它增加了服务器的负载，因为页面更大（充满了 SVG）并且无论如何都下载了图像，即使它们从未显示。

这看起来很疯狂——我认为切换的想法是浏览器应该处理它理解的第一个标签（在我的例子中，g 标签）并忽略其余的（在我的例子中的外来对象）。

我已经在 Firefox 17.0.1、Chrome 23.0.1271.95、Safari 5.1.7 和 Opera 12.10 中对此进行了测试，他们都做到了。

有什么办法可以说服浏览器他们真的不需要下载图像？

谢谢

克里斯

4

1 回答 1

1

您仍然可以通过在 a或<switch>中使用未直接显示的子项的内容来引用它。只有直接渲染开关子级被抑制。<use> <filter><clipPath>

停止下载的唯一方法是不要在图像上设置 src 属性，除非您需要它。您可以使用 javascript 检查 SVG 支持，例如

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Shape", "1.0")

如果返回 true，则设置 src 属性。

于 2012-12-11T07:37:52.650 回答