javascript - SVG字体在低版本chrome和移动端的缩放问题。
问题描述
在360极速等低版本壳浏览器和移动端浏览器中,svg中<tspan>标签中的字体无法正确缩放,在最新版本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 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>
当窗口缩小时,极速浏览器中字体大小缩放到12px就不会缩小了。最新chrome中正常。如果打开360极速的调试工具,把display:block属性去掉就正常缩放了。但直接在css中设置display:inline也不行。好奇怪。
问题解答
回答1:只要给svg设置样式 text-rendering='geometricPrecision' 就好了。
相关文章:
1. android - 哪位大神知道java后台的api接口的对象传到前端后输入日期报错,是什么情况?求大神指点2. mac里的docker如何命令行开启呢?3. css - jq有无现成函数改变rotateX/Y的deg4. css3: dl中如何让dr和dt视觉上显示到同一行?5. javascript - 如何向localStorage上的数组push数据6. html5 - bootstrap简介中的一点问题7. javascript - hbuilder做的app在边看边改模式页面能跳转,为什么到了手机端就不能跳转?8. vue添加锚点,实现滚动页面时锚点添加相应的class操作9. 求救一下,用新版的phpstudy,数据库过段时间会消失是什么情况?10. ddos - apache日志很多其它网址,什么情况?
