下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:SVG撑满页面

作者:虞兮虞兮奈若何!     来源: https://www.cnblogs.com/YKdragon/p/11899318.html点击数:1355发布时间: 2020-03-13 10:19:10

标签: XMLSVG网页

Web开发

  可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。由于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语法的人甚至可以只用一个记事本便可以读出图像中的内容来。

赞(10)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程