Question

我已经建立了一个网站并正在运行，这是我观察到的问题，您可以在以下网站上查看它：https://www.roadmapedia.com/roadmap/5c849cbd78487700173a172a

在带有树状图样的蓝屏部分中，假设您位于桌面上，图像将显示完美。

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

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

function update($request, $response, $args){
    $db = $this->db;
    $query = "UPDATE usuario set IdRh = ". $args['idRh'].", IdEps =".$args ['IdEps'].", IdTipoDeDocumento =".$args['IdTipoDeDocumento'].", NroDeDocumento=".$args['NroDeDocumento'].", Nombre=".$args['Nombre'].", Apellido=".$args['Apellido'].",TelefonoFijo=".$args['TelefonoFijo'].", Celular=".$args['Celular'].", Email = ".$args['Email'].", Direccion =".$args['Direccion'].", Contrasena=".$args['Contrasena'].", FechaDeNacimiento =".$args['FechaDeNacimiento']." where id=". $args['id'].""; 
    $result = $db->query($query);
    return $response->withJson(
        [
            "status" => 101,
            "data" => $result->fetchAll(),
            "message" => "Usuario de Id: " .$args['id']. " ha sido actualizado.",
        ], 200
    );
}

$app->get('/usuariou/{id}/{IdRh}/{IdEps}/{IdTipoDeDocumento}/{NroDeDocumento}/{Nombre}/{Apellido}/{TelefonoFijo}/{Celular}/{Email}/{Direccion}/{Contrasena}/{FechaDeNacimiento}', "UsuarioController:update");

image标签包裹在SVG标签内。所以实际上，毕竟，我在SVG的图片标签内显示了png。

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

Answer 1

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

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

根据Safari Web检查器，未显示图像的原因是因为宽度的计算结果为“ 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文件。

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

1 个答案:

P.S。