Chrome无法呈现通过<img>标记引用的SVG
Jas*_*ren 69 svg google-chrome
我有谷歌浏览器没有渲染svg与img标签的问题.刷新页面和初始页面加载时会发生这种情况.我可以通过"Inspecting Element"显示图像,然后右键单击svg文件并在新选项卡中打开svg文件.然后svg图像将在原始页面上呈现.
<img src="../images/Aged-Brass.svg">
在这里完全没有问题是什么.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>
正如您所看到的,我正在尝试在img标记和css中使用svg文件作为背景图像.在chrome或safari中的初始页面加载都不起作用.当我检查元素右键单击svg或单击链接到另一个窗口中的svg加载时,svg文件将在原始选项卡中呈现.
Sha*_*ian 57
一种简单易行的方法; 根据 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,
它对我有用!
- 这是一个有效的解决方案.我在使用photoshop将智能矢量对象导出为SVG时遇到了这个问题. (3认同)
- 我的 SVG 文件中没有这行代码，将其添加到 <svg> 标记中对我没有任何作用。 (3认同)
- 这应该是最上面的。你救了我的命。 (3认同)
- 这节省了生命，花费了数小时试图找出问题所在。谢谢！！ (2认同)
- 同样，这解决了我的问题，还花了很多时间试图找出图像不显示的原因。 (2认同)
- @Mikhail 是的，这和我的问题完全相同。从 Photoshop 导出包含错误的 xmlns 标签，无论其含义如何。 (2认同)
- 我的 svg 根本不包含图像标签。相反，它是一组“<path>”、渐变和线条标记。我该如何解决这个问题 (2认同)
ban*_*ang 28
svg-tag需要命名空间属性xmlns:
<svg xmlns="http://www.w3.org/2000/svg"></svg>
Min*_*lsh 26
我来到这里因为我有同样的问题,当我检查元素我可以看到文件,但在网站上我不能(即使使用localhost)
我的问题的答案是保存SVG文件.如果您从插图画家保存它,请确保单击"嵌入"而不是"链接".因为链接只会引用您的本地文件而不是包含数据(如果我理解正确的话).
我在adobe网站上看到了它,其中有一些其他有用的提示出口 http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
这对我有用,希望它很有用.
- 该选项对实际的SVG代码有什么影响？ (2认同)
Mik*_*lis 15
我遇到了类似的问题，现有的答案要么不适用，要么有效，但由于其他原因我们无法使用它们。所以我必须弄清楚 Chrome 不喜欢我们的 SVG 的什么地方。
在我们的例子中，结果是SVG 文件中标签id的属性中有一个，这是 Chrome 不喜欢的。当我删除它后，它工作得很好。symbol::
坏的：
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
<defs>
<symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
...
</symbol>
</defs>
<use
....
xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
/>
</svg>
好的：
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
<defs>
<symbol id="NoMoreColon">
...
</symbol>
</defs>
<use
....
xlink:href="#NoMoreColon"
/>
</svg>
- 就是这个！[四规则赞成票] (2认同)
小智 14
我来到这里是因为我有类似的问题,图像没有被渲染.我发现我的测试服务器的内容类型标题不正确.我通过在我的.htaccess文件中添加以下内容来修复它:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
资料来源:http://kaioa.com/node/45
- 谢谢。将 Content-Type 设置为 image/svg+xml 修复了它。 (4认同)
Krz*_*ski 10
.svg图像没有其初始高度和宽度。因此它是不可见的。你必须设置它。
您可以在线或在 css 文件中执行以下操作：
排队：
<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">
CSS 文件：
<img src="../images/Aged-Brass.svg" class="image" alt="logo">
.image {
width: 100px;
height: 50px;
}
小智 10
当我从 导出图像时遇到了这个问题figma。检查svg的源代码，如果你的:id中有像这样的冒号：id="paint1_linear_23:318"它会让你在chrome中渲染出现问题。
只需删除 ids 中的所有冒号即可。
不要忘记像这样引用这个 id 进行同样的操作：fill="url(#paint1_linear_23:318)"。
Adding the width attribute to the [svg] tag (by editing the svg source XML) worked for me: eg:
<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...
</svg>
<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...
</svg>
小智 7
<object>改为使用(当然,用您自己的URL替换每个URL):
.BackgroundImage {
background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
</head>
<body>
<div id="ObjectTag">
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
Your browser does not support SVG.
</object>
</div>
<div class="BackgroundImage"></div>
</body>
</html>小智 7
我有同样的问题。当我检查在标题“Content-Type”、“image/svg+xml”中接受并设置的文件类型时，这个问题得到了解决：
response.setHeader("Content-Type", "image/svg+xml");
- 你在哪里设置这个？ (2认同)
Just replace <img> tag to <object> tag for SVG image.
<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
我能够使用您的示例创建一个测试页面，并且效果很好。我的假设是你的 svg 文件有问题。您也可以将其粘贴到这里吗？这是我使用的示例。
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>