SVG 概述入门

时间：6年前阅读：5117

概述

　　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,我们将及时处理。

微信扫码关注

更新实时通知

SVG 概述 入门

网友评论

SVG 概述入门