Chrome 不呈现通过 <img> 引用的 SVG元素 [英] Chrome not rendering SVG referenced via <img> element

查看：35 发布时间：2021/12/10 15:09:27 google-chrome svg

本文介绍了Chrome 不呈现通过 <img> 引用的 SVG元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了 google chrome 无法使用 img 元素呈现 svg 的问题.刷新页面和初始页面加载时会发生这种情况.我可以通过检查元素"显示图像然后右键单击 svg 文件并在新选项卡中打开 svg 文件.然后将在原始页面上呈现 svg 图像.

这里完全不知道问题是什么.svg 图像在 IE9 和 FF 中呈现良好，但在 Chrome 或 Safari 中则不然.

我也设置了 MIME 类型.(图片/svg+xml)

这是我构建的一个简单的 html 页面，用于帮助说明我的问题.

<头><title>SVG 测试</title><风格>#背景图{背景: url('../images/Aged-Brass.svg') 无重复滚动左上角；宽度:400px；高度:600px；}#image_element {宽度:400px；高度:600px；边距:0px；填充:0px；}</风格><身体><div id="image_element"><img src=../images/Aged-Brass.svg">

<div id="BackgroundImage"></div>

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

解决方案

简单易行的方法；根据https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/您必须使用文本编辑器(如记事本)打开 .SVG 文件并更改

xlink:href="data:img/png;base64,

到:

xlink:href="data:image/png;base64,

它对我有用！

I am having issues with google chrome not rendering svg with an img element. This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right clicking the svg file and opening the svg file in a new tab. The svg image will then be rendered on the original page.

<img src="../images/Aged-Brass.svg">

Totally at loss here as to what the issue is. The svg image renders fine in IE9 and FF just not in Chrome or Safari.

I have my MIME types set as well. (image/svg+xml)

EDIT: Here is a simple html page that I built to help illustrate my issue.

<!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;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

As you can see I am trying to use an svg file in both an img element and in css as a background image. Neither work on the initial page load in chrome or safari. When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.

解决方案

A simple and easy way; according to https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ You have to open the .SVG file with a text editor (like notepad) and change

xlink:href="data:img/png;base64,

to:

xlink:href="data:image/png;base64,

it worked for me!

这篇关于Chrome 不呈现通过 <img> 引用的 SVG元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Chrome 不呈现通过 <img> 引用的 SVG元素 [英] Chrome not rendering SVG referenced via <img> element

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Chrome 不呈现通过 &lt;img&gt; 引用的 SVG元素 [英] Chrome not rendering SVG referenced via &lt;img&gt; element

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

Chrome 不呈现通过 <img> 引用的 SVG元素 [英] Chrome not rendering SVG referenced via <img> element

登录关闭