1回答

好帮手慕星星

2018-11-18

已采纳

可以这样理解：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示。

viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

svg的宽高为800px，400px；viewBox的宽高为200px 200px，在宽度上缩小了4倍，在高度上缩小了2倍，所以显示出来的效果应该是宽度上扩大4倍，高度上扩大2倍。但是绘制的是一个正方形，所以按照最小倍数绘制就是宽高分别为100*2=200,100*2=200。因为宽度上缩小了4倍，所以在（200,200）处开始绘制。左侧就会留有一个空白。

自己可以把viewBox的宽高修改成相同比例测试下：

效果：

自己测试下，祝学习愉快！

0