Html 内联SVG回退-处理所有开关元素的浏览器

我刚刚开始使用内嵌SVG在资源密集型网站上显示图像。不过，我也有一个使用switch和foreignobject标记的后备方法，以便旧浏览器只在其位置显示png图像

以下是最基本的信息——更多细节见

我认为这会减轻服务器上的负载-例如，对于一个包含4个图像的页面，浏览器一次点击就能获取所有内容，而不是5次访问服务器，1次访问页面，1次访问每个img标记

然而，现在我已经部署了这个解决方案，我发现（通过检查服务器日志）浏览器实际上在foreignobject标记内处理img请求，而不管它们是否能够处理SVG

换句话说，它增加了服务器上的负载，因为页面要大得多（充满了SVG），而且图像是下载的，即使它们从未显示过

这似乎很疯狂——我认为切换的想法是浏览器应该处理它理解的第一个标记（在我的示例中是g标记），而忽略其余的标记（在我的示例中是foreignobject）

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

我有没有办法说服浏览器他们真的不需要下载图片

谢谢

---

Chris

您仍然可以在

或

中使用未直接显示的

子对象的内容。只有开关子级的直接渲染被抑制

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

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

---

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

这很遗憾，但感谢您提供的信息。我想也许我会给用户一条“升级你的浏览器”的信息，并给他们一个选项来查看基于PNG的网站版本。

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