javascript - SVG字体在低版本chrome和移动端的缩放问题。
本文介绍了javascript - 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也不行。好奇怪。
解决方案
只要给svg设置样式 text-rendering="geometricPrecision" 就好了。
这篇关于javascript - SVG字体在低版本chrome和移动端的缩放问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
