无法在Chrome上加载SVG图像（有时） [英] SVG images not loading on Chrome (sometimes)

问题描述

您好，我已经开始将很多我的网站旧图像转换为SVG格式，我无法让它们显示在页面中。

打开图像，然后打开它后查看页面。 SVG位于我正在引用的正确的文件路径中，但不显示任何内容。

 < img class =padlock-imgsrc =content / img / cf /padlock.svgalt => 
< img src =content / img / tips / progress.svgalt => 
< img class =padlock-imgsrc =content / img / cf / padlock.svgalt => 
  

以下是我的一些例子

其中一个SVG的示例

尝试

1. 我试图将src转换为 xlink：href
   

2. 我已经在其他3个浏览器上测试过这些图片，并且图片加载只发生在 chrome 上 on localhost and file：//

关于如何解决这个问题的想法？$ b $当在Chrome中使用SVG时，您需要确保您的根标记具有 xmlns =http：//www.w3 .org / 2000 / svg

编辑

我还没有能够找到问题，但一个替代方案将是

< object data =yours.svgtype =image / svg + xml >< / object>

这似乎为所有浏览器。

Hi i have started converting a lot of my sites old image to SVG format and i cannot get them to display in the page.

The images do load if I open the image seperatly and then view the page after opening it. The SVG's are in the correct file path that I am referencing but nothing appears. Although on some refreshes it does appear.

<img class="padlock-img" src="content/img/cf/padlock.svg" alt="">
<img src="content/img/tips/progress.svg" alt="">
<img class="padlock-img" src="content/img/cf/padlock.svg" alt="">

Here are some of my examples

Example of one of the SVG's

Attempts

1. I have attemted turning src into xlink:href and this stopped the images from loading at all

2. I have tested this on 3 other browsers and the images load it is only happening on chrome on localhost and on file://

Any ideas on how to fix this?

解决方案

When using SVG in Chrome, you need to make sure that your root tag has xmlns="http://www.w3.org/2000/svg"

Edit

I haven't been able to find the problem, but one alternative would be

<object data="yours.svg" type="image/svg+xml"></object>

this seems to do the trick for all browsers.

这篇关于无法在Chrome上加载SVG图像（有时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！