html5 SVG

浏览数：37 / 时间：2015年06月09日

1，SVG是可伸缩矢量图形。含有不同标签<rect>用于创建矩形；<circle>创建圆形；<ellipse>用于创建椭圆；<line>线；<polyline>折线；<polygon>多边形

2，svg <path d="M 250,150 L150,350 L350 350 Z"/>

定义了一条路径，开始于（250px,150px），到达（150px,350px），再到达（350px,350px），最后在（250px,150px）处关闭路径

以下命令 大写表示绝对定位，小写表示相对定位：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • Z = closepath

3，svg <g>

将多个元素组织在一起

4，svg ViewBox

如果svg图形太大或者太小，就可以用ViewBox属性来调整在页面中的显示范围、大小。 <svg width="50cm" height="25cm" viewBox="0 0 2050 1000" > ：意思是 svg 图形的 2050px ， 1000px 范围，显示到 50cm,25cm 的视口， 0 ， 0 是在视口中的起点坐标。

5，enable-background设置可获得背景图片

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： html5 矢量图 svg path html5 矢量图 svg path

相关文章

随机文章

您可能还喜欢

您可能还喜欢