SVG字体在低版本chrome和移动端的缩放问题。

在360极速等低版本壳浏览器和移动端浏览器中,svg中<tspan>标签中的字体无法正确缩放,在最新版本Chrome中正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        tspan{
            display: block;
        }
    </style>
</head>
<body>
<div>
    <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>
</div>
</body>
</html>

当窗口缩小时,极速浏览器中字体大小缩放到12px就不会缩小了。最新chrome中正常。如果打开360极速的调试工具,把display:block属性去掉就正常缩放了。但直接在css中设置display:inline也不行。好奇怪。

阅读 4.1k
1 个回答

只要给svg设置样式 text-rendering="geometricPrecision" 就好了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏