29
2018
12

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/post/6956.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。