文章详情页
javascript - SVG字体在低版本chrome和移动端的缩放问题。
浏览：99日期：2022-12-27 14:14:18
问题描述
在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' 就好了。
标签：
JavaScript
相关文章：
1. 静态资源文件引入无效2. javascript - UI样式计算过多导致浏览器加载过慢，IE尤其严重，求前辈指导3. javascript - 问一个有趣的问题： 如何将 数字 转成 金额格式4. javascript - 怎么才能有效的防止网页被盗？5. javascript - 表单提交后，后台直接返回页面，应该如何处理？6. javascript - 后端传过来的数据格式是这样，如何使用？7. javascript - hammer.js panend 怎么区分是panleft 结束还是panright结束的?8. javascript - jQuery 获取表格所有数据9. javascript - <div onclick="fun()"></div>这种fun函数只有写成全局函数才有效吗？10. css3:flex排版问题
排行榜
网公网安备