web前端：SVG撑满页面

作者:虞兮虞兮奈若何！ 更新于： 2020-03-12 20:33:57

　　可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。由于SVG是XML文件，SVG图像可以用任何文本编辑器创建，但它往往是与一个绘图程序一起使用，如Inkscape，更方便地创建SVG图像。

　　当viewBox属性固定，默认修改svg标签的宽高，svg都会按比例缩放

　　我们现在不想按比例缩放，需要svg撑满整个画面

　　这里只需为svg标签添加一个关键属性：preserveAspectRatio

　　注意：经过验证，通过js或jq方法添加该属性时，需要区分大小写

　　$('svg')[0].setAttribute('preserveAspectRatio','none');

　　这样你就可以随意设置svg的宽高了

　　方法确认有效，有效才能高效

　　SVG包括3种类型的对象:矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换，并且修改其样式，也能够定义成预处理对象。

　　与传统的图像格式不同的是，SVG采用文本来描述矢量化的图形，这使得SVG图像文件可以像html网页一样有着很好的可读性。当用户用图像工具输出svG后，可以用任何文字处理工具打开SVG图像，并可看到用来描述图像的文本代码。掌握了SVG语法的人甚至可以只用一个记事本便可以读出图像中的内容来。