SVG 图像无法在手机中正确显示答案

【问题标题】：SVG image is not showing properly in mobile phoneSVG 图像无法在手机中正确显示
【发布时间】：2022-01-20 16:05:43
【问题描述】：

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

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

<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 图像的问题吗？

附：我知道 Android 早期 3 不支持 SVG 图像。我用安卓9.0版本测试，显示不完美。

【问题讨论】：

标签： html css image svg mobile

【解决方案1】：

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

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

按照我的建议，您有几个解决方案：

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

【讨论】：