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

Question

在更改宽度(台式机，平板电脑和移动设备)的显示器显示屏上，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 Early 3不支持SVG图像。我用Android 9.0版本进行了测试，但没有完美显示。

Answer 1

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

• 在logo_desktop.svg的情况下，大部分文本已转换为路径，因此问题并没有真正出现。

• 然而，在logo_mobile.svg和logo_tablet.svg中，大部分或全部文本都是使用"Monotype Corsiva"字体<text>元素。任何设备安装该字体的可能性都很低。

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

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