SVG基本图形的创建和动画详解——1

一.引言

SVG全称为“Scalable Vector Graphics”,意为可缩放矢量图形。而什么是矢量图?矢量就是向量,所以矢量图就意味着无限缩放而不改变图片的质量。
  
多说无益,下面放MDN上关于SVG的定义:

SVG是XML语言的一种形式,有点类似XHTML,它可以用来绘制矢量图形,例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。

SO~你可以像创建html dom元素一样,用类似的标签来愉快的创建各种矢量图形。当然,SVG有一套自己的规范。老规矩,关门放MDN:

HTML提供了定义标题、段落、表格等等内容的元素。与此类似,SVG 也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。一个简单的 SVG 文档由 svg 根元素和基本的形状元素构成。另外还有一个 g 元素,它用来把若干个基本形状编成一个组。从这些开始,SVG 可以成为任何复杂的组合图形。SVG 支持渐变、旋转、滤镜效果、JavaScript 接口等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现。

二.简单图形的创建

1.线(line)

<svg width="100" height="100">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

结果:
  这是SVG线条
上诉标签<line />就是SVG专门用来创建线的元素。其中X1与y1代表第一个坐标在X轴和Y轴中的位置,X2,Y2以此类推。而最终出现的图形就是这两个点连起来形成的闭合路径。

2.折线(polyline)

<svg width="200" height="200">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

结果:
  这是SVG折线
  
上述标签<polyline/>就是SVG专门用来创建折线的元素。关于points的详细解释请看下面的多边形(polygon)。

3.矩形(rect)

<svg width="200" height="100">
   <rect width="200"height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>

结果:
  这是SVG rect矩形
<rect />就是SVG专门用来创建矩形的元素。且无需设定坐标。
  
  

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值