简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Problème de mise à l'échelle des polices SVG dans la version basse de Chrome et les terminaux mobiles.
怪我咯
怪我咯 2017-05-16 13:32:50
0
1
697

Dans les navigateurs shell de version basse et les navigateurs mobiles tels que 360 ​​Extreme Speed, la police de la balise <tspan> dans svg ne peut pas être mise à l'échelle correctement, mais c'est normal dans la dernière version de Chrome. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        tspan{
            display: block;
        }
    </style>
</head>
<body>
<p>
    <svg viewBox="0,0,1000,1000"  version="1.1" xmlns="http://www.w3.org/2000/svg">
        <text><tspan class="st5" y="55.9" x="5.5">After all the articles, ads, fliers, etc. have been prepared for the newsletter, the document should be assembled and may require </tspan></text>
    </svg>
</p>
</body>
</html>

Lorsque la fenêtre est réduite, la taille de la police dans le navigateur rapide ne sera pas réduite lorsqu'elle est mise à l'échelle à 12 pixels. Cela fonctionne bien dans le dernier chrome. Si vous ouvrez l'outil de débogage 360 ​​​​Extreme Speed ​​​​et supprimez l'attribut display:block, la mise à l'échelle sera normale. Mais définir display:inline directement dans CSS ne fonctionne pas non plus. c'est filaire.

怪我咯
怪我咯

走同样的路，发现不同的人生

répondre à tous(1)
仅有的幸福
仅有的幸福2017-05-16 13:34:50 1 plancher

Définissez simplement le style text-rendering="geometricPrecision" sur le svg.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！