svg引入html文件后只能在浏览器左上角一部分区域显示,但用浏览器直接打开却可以正常显示,怎么回事?

测试使用的是chrome浏览器和火狐浏览器,一张异常显示,正常显示,异常的可以发现只有左上角一片区域正常显示,超出该范围则不能显示。

这种情况一般是由于svg中设定的画布的宽度和高度是百分比(通常是100%),这样在html中就会以一个默认的、固定的宽度和高度(300*150)来显示。解决的办法有两种,第一种是把svg中的画布宽度和高度设为一个固定值,比如(假定宽为400,高为200):
<svg width="400" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
第二种办法就是不改svg文件,而是修改html中的img标签,比如:
<img src="code1/basic.svg" width="400" height="200" alt="" />
这种方法更灵活,推荐使用。
温馨提示:答案为网友推荐,仅供参考

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网