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

Question

我有一个站点启动并运行，这是我观察到的问题，你可以看一下：https://www.roadmapedia.com/roadmap/5c849cbd78487700173a172a

在具有树形图的蓝色屏幕部分中，假设您在桌面上，图像显示完美。

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

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

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

图像标记包含在SVG标记内。所以实际上，我正在SVG的图像标签内显示一个png。

在SO上有一个与我的标题相同的问题，但它提出了一些不同的问题。

Answer 1

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

在Safari上，我能够通过向您在问题中提到的PNG和图片中也出现的YouTube SVG添加width="60"来解决您的问题。 YouTube SVG在移动设备和Safari上似乎也失败了。

根据Safari Web Inspector，图像未显示的原因是宽度计算为“1px”。

总而言之，添加width属性。尝试将PNG image标记更改为此

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

和SVG image标记到此。

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

问题应该解决，虽然我无法在没有过多工作量的情况下在移动设备上进行测试。

P.S.

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