SVG 图像未在 Chrome 上加载（有时）

Posted 2023-03-05

【中文标题】SVG 图像未在 Chrome 上加载（有时）

【英文标题】：SVG images not loading on Chrome (sometimes)

【发布时间】：2016-01-17 20:58:35

【问题描述】：

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

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

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

这是我的一些例子

Example of one of the SVG's

尝试

我已经尝试将 src 转换为 xlink:href，这完全阻止了图像的加载

我已经在其他 3 个浏览器上对此进行了测试，并且图像加载仅在本地主机上的 chrome 和 file://

上发生

关于如何解决这个问题的任何想法？

【问题讨论】：

你在用wordpress吗？如果是，您需要编辑您的 .htaccess 并插入 svg 代码。参考：kaioa.com/node/45

我没有使用 wordpress，它是一个本地项目，不是托管在服务器上的，而是在 file:// 上（这可能是问题吗？）

您确定链接正确吗？正如你所说，这是本地的，应该可以工作

链接是正确的 - 修改它只发生在 chrome 上

Chrome 的 javascript 控制台中是否有任何警告/错误？

【参考方案1】：

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

编辑

我没能找到问题，但另一种选择是

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

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

【讨论】：

我的所有 svg 上都有这个标签，但仍然没有工作

现在有问题了 :)

【参考方案2】：

我有一张这样的图片值得我这样做

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

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

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