您的位置:首页> HTML5教程> SVG教程

SVG代码构成简单介绍

2018-9-2 00:40| 作者: admin| 查看: 1563| 评论: 0|来自: 蚂蚁部落

首先要知道,SVG代码其实就是标准的XML代码。

我们既可以将代码单独写入一个SVG文件(.svg格式文件),也可以直接内嵌在HTML代码之中。

一.SVG文件的结构:

svg文件是以.svg为后缀的文件,下面逐步介绍一下它的结构。

(1).首先要有一个XML声明:

这非常好理解,可以类比我们使用频繁的HTML。

[HTML] 纯文本查看 复制代码
<!doctype html>

上面是HTML5的头部DTD声明;XML的声明与之非常类似,代码如下:

[XML] 纯文本查看 复制代码
<?xml version="1.0"?>

(2).描述SVG的XML命名空间:

命名空间是通过xmlns属性规定的;这个也可以在HTML中找到对应的部分,如下:

[HTML] 纯文本查看 复制代码
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

XML命名空间的声明如下:

[XML] 纯文本查看 复制代码
<svg xmlns="http://www.w3.org/2000/svg">

(3).代码演示:

[XML] 纯文本查看 复制代码
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="300">
  <!--code -->
</svg>

如果一个SVG文件包含内部链接,那么xmlns:xlink="http://www.w3.org/1999/xlink"不可省略,否则可以省略。

二.嵌入HTML的SVG:

SVG不但可以单独形成一个文件,也可以直接嵌入到HTML代码之中。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
          cx="100" cy="50"
          r="40"
          stroke="black"
          stroke-width="5"
          fill="green" />
</svg>
</body>
</html>

上面的代码就演示了直接在HTML中嵌套的SVG代码,不过有两点需要注意:

(1).XML声明不再需要。

(2).由于对SVG支持的问题,HTML的DTD应该采用HTML5的方式。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

返回顶部