SVG<图像>HTML 中内联的标签未在浏览器中加载图像

发布于 2024-11-19 03:13:07 字数 406 浏览 2 评论 0原文

尝试使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

彩扇题诗 2024-11-26 03:13:07

您需要使用:

<image ... xlink:href="...">

请参阅SVG 文档结构规范

You need to use:

<image ... xlink:href="...">

See the SVG Document Structure spec.

安人多梦 2024-11-26 03:13:07

这不是问题中的情况,但我在工作时遇到了类似的问题, 标签未显示在 Edge 中在 Firefox 和 Chrome 中正确。

事实证明,如果您没有在 标记上显式设置 heightwidth 属性,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 a width attribute on the <image> tag Edge won't show the image. This is not the case in Chrome and Firefox where width alone was enough.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文