SVG 图像在移动设备中显示不正确 phone

Question

在改变宽度的显示器上（台式机、平板电脑和移动设备）SVG 图像显示完美，但在真实移动设备上 phone 图像被截断。在真实phone上打开仓库可以看到：https://miorita69.github.io/perle_di_stelle/

在页眉中我使用了图片标签。电脑显示器上三个阶段都完美，但手机phone中的第三个被截断了。

<picture>
   <source type="image/svg+xml" media="(min-width: 768px)" srcset="images/logo_desktop.svg">
   <source type="image/svg+xml" media="(min-width: 680px)" srcset="images/logo_tablet.svg">
   <source type="image/svg+xml" media="(min-width: 320px)" srcset="images/logo_mobile.svg">
   <img class="navbar__logo-image" src="images/logo-mobile.png" alt="Logo Perle di Stelle">
</picture>

CSS

.navbar__logo-image {
   width: auto;
   height: calc(90% - 10px);
   display: block;
   margin: 5px auto;
}

 @media screen and (min-width:320px) and (max-width:860px) {
 .navbar__logo-image {
    width: 100%;
    height: var(--tablet-navbar-height);
    overflow: visible;
    display: block;
    margin: 0 auto;
    /*border: blue 1px solid;*/
 }
 ...
}

你能帮我找出移动设备中 SVG 图片的问题吗phone。

P.S。我知道 Android 较早的 3 个不支持 SVG 图像。我用 Android 9.0 版本测试，显示不完美。

Answer 1

您的所有三个 SVG 都使用了 <text> 元素。因此，SVG 的正确呈现依赖于显示它们的设备，具有可用的指定字体。

在logo_desktop.svg的情况下，大部分的文字都被转换成了路径，所以问题并没有真正显现出来。
然而，在logo_mobile.svg和logo_tablet.svg中，大部分或全部文本是使用“Monotype Corsiva”字体的<text>元素。任何设备都安装该字体的可能性很小。

你有几个解决方案，按照我推荐的顺序：

返回矢量编辑器并确保所有文本元素都已转换为路径。您的问题将会消失。
许可 Microsoft Cursiva 字体并将其添加到您的网站 CSS 使用 @font-face 等
更改 SVG 以使用所有设备都可能支持的字体。 IE。普通旧默认值 font: serif.

SVG 图像在移动设备中显示不正确 phone

SVG image is not showing properly in mobile phone

html

css

mobile

svg

image