Chrome浏览器有时无法加载SVG图像

Question

你好，我开始将我的网站上的很多旧图片转换成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="">

这是我的一些示例

其中一个SVG的示例

尝试过的方法

1. 我尝试将src更改为xlink:href，但这导致图片完全无法加载

2. 我已在其他 3 种浏览器上测试过，图片都能正常加载，只有在本地主机和file://中出现问题（chrome浏览器）。

有什么解决方法吗？

- Kieranmv95

---

你正在使用WordPress吗？如果是的话，你需要编辑你的.htaccess文件并插入一个SVG代码。参考：http://kaioa.com/node/45 - rafahell

我没有使用WordPress，目前这是一个本地项目，没有托管在服务器上，而是在file://上（这可能是问题所在？） - Kieranmv95

你确定链接是正确的吗？因为你说它是本地的，应该可以工作。 - rafahell

链接是正确的 - 修订只在 Chrome 上发生 - Kieranmv95

Chrome 的 JavaScript 控制台有任何警告/错误吗？ - Robert Longson

Answer 1

在Chrome中使用SVG时，需要确保你的根标签具有xmlns="http://www.w3.org/2000/svg"

编辑

我没有找到问题所在，但一个替代方案是：

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

这似乎对所有浏览器都起作用。

- Marco Aurélio Deleu

---

我在所有的SVG上都有这个标签，但仍然无法工作。 - Kieranmv95

现在还不确定。 - Kieranmv95

Answer 2

就像你所说，我有一张类似的图片

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

如果您在编辑器中打开svg文件，将会看到我所做的更改:

xlink:href="data:img/png;base64 替换为 xlink:href="data:image/png;base64

- MomasVII