javascript - SVG font scaling problem in low version chrome and mobile terminals.
怪我咯
怪我咯 2017-05-16 13:32:50
0
1
708

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)
仅有的幸福

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template