简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - SVG font scaling problem in low version chrome and mobile terminals.
怪我咯
怪我咯 2017-05-16 13:32:50
0
1
635

In low-version shell browsers and mobile browsers such as 360 Extreme Speed, the font in the <tspan> tag in svg cannot be scaled correctly, but it is normal in the latest version of 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>

When the window is reduced, the font size in the speed browser will not be reduced when it is scaled to 12px. It works fine in the latest chrome. If you open the 360 ​​Extreme Speed ​​debugging tool and remove the display:block attribute, the scaling will be normal. But setting display:inline directly in css does not work either. it's wired.

怪我咯
怪我咯

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

reply all(1)
仅有的幸福
仅有的幸福2017-05-16 13:34:50 1 floor

Just set the style text-rendering="geometricPrecision" to the svg.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！