在浏览器中嵌入 <img> 标记时，带有外部图像的 SVG 不会加载它们答案

【问题标题】：SVG with external images doesn't load them when embedded with <img> tag in browsers在浏览器中嵌入 <img> 标记时，带有外部图像的 SVG 不会加载它们
【发布时间】：2011-02-14 12:48:35
【问题描述】：

我做了以下观察：

如果我创建一个通过xlink:href 引用外部光栅图像的 svg 图像并尝试在浏览器中加载 svg，则外部图像仅在我使用 <object> 标记时显示，但在使用 @987654323 时不显示@标签。

使用<object> 标记进行渲染非常慢，而且不如使用 img 标记图像干净，所以我想知道是否有办法通过<img> 标记使其工作。

一开始我以为是同源策略不行，但即使引用的图片在同一个目录中，我只通过它的名字引用它，它也不会加载。

有什么想法吗？

【问题讨论】：

我也对他很好奇...所以我希望出现一些答案:)
好问题，'svg' 中的 'image' 标签在 ff/chrome 中对我有用，但在歌剧中不适用（

标签： svg same-origin-policy

【解决方案1】：

没有什么特别的原因<object> 的加载速度应该比<img> 慢，除了可能的交互方面（img 是静态的，而 object 是完全交互的文档）。 svg 中的图像应该在两种情况下都加载，所以这听起来像是浏览器中的错误。

您能否发布一个指向您的示例的链接？

【讨论】：

【解决方案2】：

你用的是 IE 吗？无论如何，IE 都不识别 SVG。微软总是落后十年，但出于某种原因，它们更受欢迎且成本更高。名牌宣传？

SVG 在 Firefox 中加载。作为直接在 URL 中引用的 XML 文档，如果您将其嵌入到具有适当命名空间的 XHTML（完全符合 XML）文档中，则 SVG 应该正确呈现。这个选项的好处是 DHTML 可以操纵您的 SVG。如果你好奇的话，我在这一段中所说的一切也适用于 MathML。

除此之外，SVG 不会从图像标签加载。不过，我确实相信 Firefox 正在努力进行此升级。我不完全确定。

我想，使用 object 或 embed 标记是合理的……但我早期的修复之一是使用 iframe。在引用完整 SVG 文件的 html 中嵌入 iframe。使用 CSS，您可以使 iframe 看起来与文档的其余部分齐平，看起来像图像一样。包含在 div 或 span 标签中，您可以拥有 onhover 和 onclick 事件处理程序。

使用图像标签，您的 src 可以是服务器端的 PHP 文件。如果编码正确并使用适当的 cgi 应用程序，您可以在服务器端光栅化您的 SVG，并通过 PHP src 将 PNG 数据发送回您的图像。

【讨论】：

SVG 在 Firefox 的图像标签中为我工作，并且至少使用了一年。 This page's first image 是一个使用图像标签的 svg。还是我误解了你的评论？

【解决方案3】：

我认为您至少落后了 10 个月...IE9 支持 SVG，并且预发布版本（包括测试版）已经发布了很长一段时间。查看 www.ietestdrive.com 以获取平台预览 - 这非常好。在我看来，他们对 SVG 的部分支持目前比 Firefox 好得多（但他们还不支持 SMIL）。

【讨论】：

如果你现在想创建一个网站，你需要支持各种浏览器，所以除非你想做一个技术演示，否则专注于最新最好的浏览器是没有帮助的。