SVG是什么?简单了解下
SVG是一种XML语言,类似XHTML,可以用来绘制矢量图形。
HTML提供了定义标题、段落、表格等等内容的元素。与此类似,SVG也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由
根元素和基本的形状元素构成。另外还有一个<svg>
g
元素,它用来把若干个基本形状编成一个组。简
单的例子开始,看一下下面代码:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
复制并粘贴代码到文件demo1.svg。然后用Firefox打开该文件。 它将会呈现为下面的截图。
绘制流程包括以下几步:
- 从
svg
根元素开始<svg>,具体详见https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Getting_Started。 - 绘制一个完全覆盖图像区域的矩形
<rect/>,
把背景颜色设为红色。 一个半径80px的绿色圆圈<ci