Home  >  Q&A  >  body text

javascript - SVG font scaling problem in low version chrome and mobile terminals.

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.

怪我咯怪我咯2734 days ago699

reply all(1)I'll reply

  • 仅有的幸福

    仅有的幸福2017-05-16 13:34:50

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

    reply
    0
  • Cancelreply