SVG图片未在Chrome上加载(有时)

时间:2015-10-19 13:26:04

标签: html css image google-chrome svg

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

如果我单独打开图像然后在打开图像后查看页面,则会加载图像。 SVG位于我正在引用的正确的文件路径中但没有出现任何内容。虽然在一些刷新时确实会出现。

<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="">

以下是我的一些例子

Example of one of the SVG's

尝试

  1. 我已经考虑将src转换为xlink:href并且这会阻止图像加载

  2. 我已经在其他3个浏览器上对此进行了测试,并且加载它的图片只发生在localhost上的 chrome 和文件://

  3. 有关如何解决此问题的任何想法?

2 个答案:

答案 0 :(得分:4)

在Chrome中使用SVG时,您需要确保根标记为xmlns="http://www.w3.org/2000/svg"

修改

我一直无法找到问题,但另一种选择是

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

这似乎适用于所有浏览器。

答案 1 :(得分:0)

我有这样一张图片

<img src="public/image/circles/circle.svg" class="circle_img" />

如果您在我更改的编辑器中打开svg

xlink:href="data:img/png;base64xlink:href="data:image/png;base64