带有外部图像的 SVG 在嵌入 ![]()
时不会加载它们浏览器中的标签
我进行了以下观察：
如果我创建一个通过 xlink:href 引用外部光栅图像的 svg 图像，并尝试在浏览器中加载 svg，则仅当我使用 时才会显示外部图像>
使用
起初我认为它不起作用，因为同源策略，但即使引用的图像位于同一目录中并且我仅通过其名称引用它，它也不会加载。
有什么想法吗？
I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你用的是IE吗？无论如何，IE 无法识别 SVG。微软总是落后十年，但出于某种原因，它们更受欢迎，成本也更高。名牌宣传？
SVG 在 Firefox 中加载。无论是作为在 URL 中直接引用的 XML 文档，还是如果将其嵌入到具有适当命名空间的 XHTML（完全符合 XML）文档中，SVG 都应该正确呈现。此选项的优点是 DHTML 可以操作您的 SVG。如果您好奇的话，我在本段中所说的所有内容也适用于 MathML。
除此之外，SVG 不会从图像标签加载。不过，我确实相信 Firefox 正在致力于此升级。我不太确定。
我认为使用对象或嵌入标签是合理的......但我早期的修复之一是使用 iframe。在 html 中嵌入引用完整 SVG 文件的 iframe。使用 CSS，您可以使 iframe 看起来与文档的其余部分齐平，看起来和表现得像图像一样。封装在 div 或 span 标记中，您可以拥有 onhover 和 onclick 事件处理程序。
使用图像标签，您的 src 可以是服务器端的 PHP 文件。如果编码正确并使用适当的 cgi 应用程序，您可以在服务器端光栅化 SVG，并通过 PHP src 将 PNG 数据发送回您的图像。
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
除了可能的交互方面（img 是静态的，而 object 是完全交互式文档）之外，没有什么特殊原因
您可以发布您的示例的链接吗？
There's no particular reason
<object>should be any slower to load than<img>apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.Could you post a link to your example?
我认为你至少落后了 10 个月......IE9 支持 SVG，并且预发布版本（包括测试版）已经发布了一段时间了。请访问 www.ietestdrive.com 获取平台预览 - 非常好。在我看来，他们的部分 SVG 支持比目前的 Firefox 好得多（但他们还不支持 SMIL）。
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).