SVG 概述 入门
概述
SVG是XML语言的一种形式，有点类似XHTML，它可以用来绘制矢量图形，可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形
注意:IE8-浏览器不兼容
SVG提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组
从这些开始，SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现
入门
下面直接从一个简单的例子开始介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="blue" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="30" text-anchor="middle" fill="white">SVG入门</text> </svg> </body> </html>
上面实例的绘制流程包括以下几步
1、从svg根元素开始
2、绘制一个完全覆盖图像区域的矩形 <rect>，把背景颜色设为红色
3、一个半径80px的绿色圆圈<circle>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）
4、绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知