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

Question

我做了以下观察：

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

使用<object>标记进行渲染非常慢，并且不像使用图像的img标记那样干净，因此我想知道是否有办法让它通过<img>标记。

起初我认为它不起作用是因为相同的原始策略，但即使引用的图像位于同一目录中并且我仅通过其名称引用它，它也不会加载。

有什么想法吗？

Answer 1

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

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

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

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

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

Answer 2

除了可能的交互方面（img是静态的，而对象是完全交互式文档）之外，<object>加载速度比<img>更慢没有特别的原因。 svg中的图像应该在两个场景中加载，所以它听起来像浏览器中的错误。

您可以发布指向您示例的链接吗？

Answer 3

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