html - SVG 图像标签中的图像未显示在 Chrome 中,而是显示在本地?

标签 html css svg web

出于某种原因,Chrome 显示的 SVG 图像标签中没有图像。

这是我的 SVG 示例:

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png 是一个本地文件,我也试过上传到imgur,但是也没用。

这是 svg 标签:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

这是它在本地的样子:

http://i.imgur.com/BDP8KpG.png

这是它在实时网页上的样子:

http://i.imgur.com/KVuxLI1.png

如您所见,这两名球员不见了。当我在线上传 SVG 时不会发生这种情况,但是当我尝试将该 URL 链接到我的页面时,同样的事情发生了

不确定它是否相关,但这是页面的 HTML 代码:

<!DOCTYPE HTML>
<html>
<head>
<title>SVG</title> 
<style>
img{
    width: 100%;
    height:auto;
    max-width: 800px;
}
</style>
</head>

<body>

<div>
    <img src="svg.svg"/>
</div>

</body>
</html>

最佳答案

PaulLeBeau 的回答是正确的。但另一种解决方案是为图片使用 embed 标签而不是 img 标签。

<embed src="svg.svg">

Here是一些在 HTML 中嵌入 svg 图像的方法。

关于html - SVG 图像标签中的图像未显示在 Chrome 中,而是显示在本地?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41195669/

相关文章:

html - CSS 更改边框颜色两次,同时赋予它从左到右的效果

javascript - 粘性标题 Logo 悬停

javascript - Fabricjs:如何将导入的 SVG 图像分解为单独的单独 PathGroup,而不是一个?

javascript - 使用javascript翻转SVG对象

SVG Sprite : how to handle sizes?

javascript - HTML DOM 获取具有 ID 的段落中字体样式的长度

javascript - 火狐浏览器 JavaScript 兼容性

css - HTML5 缩写标签如何在悬停文本消息上设置标题样式

html - 如何在事件时更改字体超棒的图标颜色

html - 在对齐的文本中设置一个换行符,并且仍然让它对齐