SVG<图像>HTML 中内联的标签未在浏览器中加载图像图像>
尝试使用 HTML 页面加载 SVG 中的图像:
<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>
除了图像之外,svg 中的所有其他元素都会加载(路径形状文本)。有什么办法让它在浏览器中工作吗?我试过 Chrome、Firefox、IE。所有浏览器都缺少图像。
使用 Chrome 我发现 Chrome 甚至不发送图像请求。我有预感 IE 和 Firefox 也是一样的。
有什么解决办法吗?
Trying to load an image in SVG using an HTML page:
<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>
All other elements in the svg load up (paths shapes text) except image. Any way to get this working in browsers? I've tried Chrome, Firefox, IE. All browsers are missing the image.
Using Chrome I found that Chrome doesn't even send the request for the image. I have a hunch it's the same for IE and Firefox.
Any solutions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要使用:
请参阅SVG 文档结构规范。
You need to use:
See the SVG Document Structure spec.
这不是问题中的情况,但我在工作时遇到了类似的问题,
标签未显示在 Edge 中在 Firefox 和 Chrome 中正确。
事实证明,如果您没有在
标记上显式设置
height
和width
属性,Edge 将不会显示图像。在 Chrome 和 Firefox 中,情况并非如此,仅width
就足够了。This is not the case in question, but I ran across a similar issue with an
<image href="/path/to/file.svg">
tag not showing up in Edge, while working correctly in Firefox and Chrome.It turns out that if you don't explicitly set both a
height
and awidth
attribute on the<image>
tag Edge won't show the image. This is not the case in Chrome and Firefox wherewidth
alone was enough.