html中使用svg技巧

<img src="picture.svg">chrome显示不全问题（有时会显示完整）；IE，火狐，safari正常

移动端缩放文字比例失调问题处理：

svg文件中给所有的text标签加上text-rendering="geometricPrecision"

div{background:url("picture.svg") no-repeat center top;background-size:contain;}

chrome显示不全问题（有时会显示完整），IE，火狐，safari显示正常；

移动端缩放文字比例失调问题处理：

svg文件中给所有的text标签加上text-rendering="geometricPrecision"

缺点是不能根据svg背景图自适应大小

chrome，IE9以上正常，火狐不显示，safari不能等比缩放出现滚动条

移动端文字可以等比缩放

chrome，IE，火狐正常；safari不能等比缩放出现滚动条

移动端文字可以等比缩放

同一个页面，object标签一定要放在最后，否则其之后的标签浏览器中不出现

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。