Question

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

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





Answer 1

这种情况一般是由于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="" />
这种方法更灵活，推荐使用。