小编Jas*_*ren的帖子

Chrome无法呈现通过<img>标记引用的SVG

我有谷歌浏览器没有渲染svg与img标签的问题.刷新页面和初始页面加载时会发生这种情况.我可以通过"Inspecting Element"显示图像,然后右键单击svg文件并在新选项卡中打开svg文件.然后svg图像将在原始页面上呈现.

<img src="../images/Aged-Brass.svg">
Run Code Online (Sandbox Code Playgroud)

在这里完全没有问题是什么.svg图像在IE9和FF中渲染得很好,而不是在Chrome或Safari中.

我也设置了我的MIME类型.(图像/ SVG + XML)

编辑: 这是一个简单的html页面,我建立,以帮助说明我的问题.

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,我正在尝试在img标记和css中使用svg文件作为背景图像.在chrome或safari中的初始页面加载都不起作用.当我检查元素右键单击svg或单击链接到另一个窗口中的svg加载时,svg文件将在原始选项卡中呈现.

svg google-chrome

69
推荐指数
12
解决办法
11万
查看次数

标签 统计

google-chrome ×1

svg ×1