Html SVG中的图像'；s图像标签显示在桌面浏览器中，而不是iphone

我已经建立并运行了一个网站，以下是我观察到的问题，您可以在以下网站上查看：

在带有树状图的蓝屏部分，假设您在桌面上，图像显示非常好

但是，在我的iphone6上看起来是这样的：

因此SVG图像不显示。 以下是代码中的SVG图像：

<image xlink:href="/static/media/circle.ffe52f1d.png" height="60" transform="translate(-30,-30)"></image>

图像标记被包装在SVG标记中。实际上，我在SVG的图像标签中显示了一个png

---

有一个问题的标题和我的一样，但它问的是不同的问题

您可能会注意到，您的图像在Safari上的显示也不正确。特别是在转换和特殊情况下，并非所有SVG呈现器都遵循SVG标准行为

在Safari上，我可以通过在您的问题中提到的PNG和图像中出现的YouTube SVG中添加一个

width=“60”

来解决您的问题。YouTube SVG在移动和Safari上似乎也失败了

根据Safari Web Inspector的说法，图像没有显示的原因是因为宽度是按“1px”计算的

总之，添加

width

属性。尝试将PNG

图像

标记更改为此

<image xlink:href="/static/media/circle.ffe52f1d.png" width="60" height="60" transform="translate(-30,-30)"></image>

这个问题应该得到解决，尽管我无法在移动设备上测试这个问题，而不需要做大量的工作

附笔。

---

您在图像中使用的PNG非常简单。它似乎只是一个带有线性颜色渐变的圆。我强烈建议将其矢量化，而不是在SVG中使用光栅图像。创建这将是一个非常简单的SVG文件。

@Acy很乐意提供帮助。请随时发电子邮件给我william@coinflip.tech如果您需要矢量化方面的帮助。

<image xlink:href="/static/media/youtube.45edfe4d.svg" width="60" height="60" transform="translate(-30,-30)"></image>