在更改寬度的顯示幕上（臺式機、平板電腦和手機），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 影像的問題嗎？
PS 我知道 Android 早期 3 不支持 SVG 影像。我用 Android 9.0 版本測驗，并沒有完美顯示。
uj5u.com熱心網友回復：
您的所有三個 SVG 都在使用<text>元素。因此，SVG 的正確渲染依賴于顯示它們的設備，它們具有可用的指定字體。
在 logo_desktop.svg 的情況下，大部分文本都已轉換為路徑，因此問題并沒有真正出現。
然而，在 logo_mobile.svg 和 logo_tablet.svg 中，大部分或全部文本是
<text>使用“Monotype Corsiva”字體的元素。任何設備都安裝該字體的可能性很小。
按照我的建議，您有一些解決方案：
- 回傳您的矢量編輯器并確保所有文本元素都轉換為路徑。你的問題就會消失。
- 許可 Microsoft Cursiva 字體并將其添加到您的網站 CSS 使用
@font-face等。 - 更改 SVG 以使用所有設備都可能支持的字體。IE。普通的舊默認值
font: serif。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/416940.html
標籤：
上一篇：行內SVG但在單獨的檔案中？
下一篇：Laravel無法加載正確的外鍵