从入门到上线一个天气小程序

纯洁的代码
125 阅读1小时+
概述
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9

[color=rgb(170, 170, 170) !important]
10

[color=rgb(170, 170, 170) !important]
11

[color=rgb(170, 170, 170) !important]
12

[color=rgb(170, 170, 170) !important]
13

[color=rgb(170, 170, 170) !important]
14


[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
!
[color=teal !important]
DOCTYPE
[color=rgb(0, 45, 122) !important]
html
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
html
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
head
[color=rgb(0, 111, 224) !important]
>
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
head
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
body
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg

[color=teal !important]
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mysvg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
xmlns
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"http://www.w3.org/2000/svg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
viewBox
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0 0 800 600"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
preserveAspectRatio
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"xMidYMid meet"

[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mycircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"400"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
body
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
html
[color=rgb(0, 111, 224) !important]
>




上面是 SVG 代码直接插入网页的例子。
SVG 代码也可以写在一个独立文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
img
[color=rgb(0, 45, 122) !important]
src
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"circle.svg"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(128, 0, 128) !important]
object
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"object"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
data
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"circle.svg"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
type
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"image/svg+xml"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(128, 0, 128) !important]
object
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
embed
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"embed"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
src
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"icon.svg"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
type
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"image/svg+xml"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
iframe
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"iframe"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
src
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"icon.svg"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
iframe
[color=rgb(0, 111, 224) !important]
>




CSS 也可以使用 SVG 文件。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]










[color=rgb(102, 102, 102) !important]
CSS



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=teal !important]
.logo
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=teal !important]
background
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
url
[color=rgb(51, 51, 51) !important]
(
icon.svg
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}




SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
img
[color=rgb(0, 45, 122) !important]
src
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"data:image/svg+xml;base64,[data]"
[color=rgb(0, 111, 224) !important]
>





二、语法2.1<svg>标签
SVG 代码都放在顶层标签<svg>之中。下面是一个例子。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100%"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100%"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mycircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。
如果只想展示 SVG 图像的一部分，就要指定viewBox属性。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
viewBox
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50 50 50 50"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mycircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2.2 <circle>标签
<circle>标签代表圆形。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"30"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"90"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
class
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"red"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"150"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
class
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"fancy"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面的代码定义了三个圆。<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。
class属性用来指定对应的 CSS 类。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]










[color=rgb(102, 102, 102) !important]
CSS



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9


[color=teal !important]
.red
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=teal !important]
fill
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
red
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}


[color=teal !important]
.fancy
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=teal !important]
fill
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
none
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=teal !important]
stroke
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
black
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=teal !important]
stroke-width
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
3pt
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}




SVG 的 CSS 属性与网页元素有所不同。
  • fill：填充色
  • stroke：描边色
  • stroke-width：边框宽度
2.3 <line>标签
<line>标签用来绘制直线。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
line
[color=rgb(0, 45, 122) !important]
x1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"200"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
style
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"stroke:rgb(0,0,0);stroke-width:5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。
2.4 <polyline>标签
<polyline>标签用于绘制一根折线。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
polyline
[color=rgb(0, 45, 122) !important]
points
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"3,3 30,28 3,53"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"none"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"black"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

2.5 <rect>标签
<rect>标签用于绘制矩形。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
rect
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"200"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
style
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"stroke: #70d5dd; fill: #dd524b"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。
2.6 <ellipse>标签
<ellipse>标签用于绘制椭圆。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
ellipse
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"60"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"60"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
ry
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"40"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
rx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"black"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"silver"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。
2.7 <polygon>标签
<polygon>标签用于绘制多边形。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
polygon
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"green"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"orange"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"1"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
points
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0,0 100,0 100,100 0,100 0,0"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
2.8 <path>标签
<path>标签用于制路径。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9

[color=rgb(170, 170, 170) !important]
10

[color=rgb(170, 170, 170) !important]
11

[color=rgb(170, 170, 170) !important]
12


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
path
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
d
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"

[color=rgb(221, 17, 68) !important]
M 18,3

[color=rgb(221, 17, 68) !important]
L 46,3

[color=rgb(221, 17, 68) !important]
L 46,40

[color=rgb(221, 17, 68) !important]
L 61,40

[color=rgb(221, 17, 68) !important]
L 32,68

[color=rgb(221, 17, 68) !important]
L 3,40

[color=rgb(221, 17, 68) !important]
L 18,40

[color=rgb(221, 17, 68) !important]
Z

[color=rgb(221, 17, 68) !important]
"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
path
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
  • M：移动到（moveto）
  • L：画直线到（lineto）
  • Z：闭合路径
2.9 <text>标签
<text>标签用于绘制文本。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
>
[color=teal !important]
Hello
[color=rgb(0, 45, 122) !important]
World
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
2.10 <use>标签
<use>标签用于复制一个形状。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
viewBox
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0 0 30 10"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
xmlns
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"http://www.w3.org/2000/svg"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"4"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>


[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"10"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"white"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
2.11 <g>标签
<g>标签用于将多个形状组成一个组（group），方便复用。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
g
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"myCircle"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
>
圆形[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
g
[color=rgb(0, 111, 224) !important]
>


[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"200"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"white"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>





2.12 <defs>标签
<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9

[color=rgb(170, 170, 170) !important]
10

[color=rgb(170, 170, 170) !important]
11

[color=rgb(170, 170, 170) !important]
12


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
defs
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
g
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"myCircle"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"25"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
>
圆形[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
g
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
defs
[color=rgb(0, 111, 224) !important]
>


[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
use
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#myCircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"200"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"white"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
stroke
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"blue"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>





2.13 <pattern>标签
<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]












[color=rgb(102, 102, 102) !important]
JavaScript



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=teal !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
defs
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
pattern
[color=teal !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"dots"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
patternUnits
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"userSpaceOnUse"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=teal !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#bee9e8"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"35"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
pattern
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
defs
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
rect
[color=rgb(0, 111, 224) !important]
[color=teal !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100%"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100%"
[color=rgb(0, 111, 224) !important]
[color=teal !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"url(#dots)"
[color=rgb(0, 111, 224) !important]
[color=rgb(153, 153, 153) !important]
/>

[color=rgb(153, 153, 153) !important]
</s
[color=rgb(0, 45, 122) !important]
vg
[color=rgb(0, 111, 224) !important]
>




上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
2.14 <image>标签
<image>标签用于插入图片文件。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
viewBox
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0 0 100 100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
image
[color=rgb(0, 45, 122) !important]
xlink
[color=rgb(0, 111, 224) !important]
:
[color=rgb(0, 45, 122) !important]
href
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"path/to/image.jpg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50%"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50%"
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面代码中，<image>的xlink:href属性表示图像的来源。
2.15 <animate>标签
<animate>标签用于产生动画效果。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500px"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500px"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
rect
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"100"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#feac5e"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
animate
[color=rgb(0, 45, 122) !important]
attributeName
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"x"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
from
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
to
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dur
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"2s"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
repeatCount
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"indefinite"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
rect
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面代码中，矩形会不断移动，产生动画效果。
<animate>的属性含义如下。
  • attributeName：发生动画效果的属性名。
  • from：单次动画的初始值。
  • to：单次动画的结束值。
  • dur：单次动画的持续时间。
  • repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
animate
[color=rgb(0, 45, 122) !important]
attributeName
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"x"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
from
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
to
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dur
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"2s"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
repeatCount
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"indefinite"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
animate
[color=rgb(0, 45, 122) !important]
attributeName
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"width"
[color=rgb(0, 111, 224) !important]
to
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dur
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"2s"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
repeatCount
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"indefinite"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>





2.16 <animateTransform>标签
<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]















[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500px"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500px"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
rect
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"250"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"250"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
fill
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"#4bc0c8"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
animateTransform
[color=rgb(0, 45, 122) !important]
attributeName
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"transform"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
type
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"rotate"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
begin
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0s"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dur
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"10s"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
from
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0 200 200"
[color=rgb(0, 111, 224) !important]
to
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"360 400 400"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
repeatCount
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"indefinite"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
rect
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面代码中，<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
三、JavaScript 操作3.1 DOM 操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg

[color=teal !important]
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mysvg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
xmlns
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"http://www.w3.org/2000/svg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
viewBox
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0 0 800 600"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
preserveAspectRatio
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"xMidYMid meet"

[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
circle
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"mycircle"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"400"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"300"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"50"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>




上面代码插入网页之后，就可以用 CSS 定制样式。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]










[color=rgb(102, 102, 102) !important]
CSS



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9

[color=rgb(170, 170, 170) !important]
10


[color=teal !important]
circle
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=teal !important]
stroke-width
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
5
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=teal !important]
stroke
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
#f00
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=teal !important]
fill
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
#ff0
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}


[color=teal !important]
circle:hover
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=teal !important]
stroke
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
#090
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=teal !important]
fill
[color=rgb(51, 51, 51) !important]
:
[color=rgb(0, 111, 224) !important]
#fff
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}




然后，可以用 JavaScript 代码操作 SVG。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6


[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
mycircle
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getElementById
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'mycircle'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;


[color=rgb(0, 45, 122) !important]
mycircle
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
addEventListener
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'click'
[color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
function
[color=rgb(51, 51, 51) !important]
(
[color=rgb(0, 45, 122) !important]
e
[color=rgb(51, 51, 51) !important]
)
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
console
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
log
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'circle clicked - enlarging'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
mycircle
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
setAttribute
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'r'
[color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 153, 153) !important]
60
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}
[color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
false
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;




上面代码指定，如果点击图形，就改写circle元素的r属性。
3.2 获取 SVG DOM
使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3


[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
svgObject
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getElementById
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'object'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
contentDocument
[color=rgb(51, 51, 51) !important]
;

[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
svgIframe
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getElementById
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'iframe'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
contentDocument
[color=rgb(51, 51, 51) !important]
;

[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
svgEmbed
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getElementById
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'embed'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getSVGDocument
[color=rgb(51, 51, 51) !important]
(
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;




注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。
3.3 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
div
[color=rgb(0, 45, 122) !important]
id
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"svg-container"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg

[color=teal !important]
[color=rgb(0, 45, 122) !important]
xmlns
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"http://www.w3.org/2000/svg"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
xmlns
[color=rgb(0, 111, 224) !important]
:
[color=rgb(0, 45, 122) !important]
xlink
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"http://www.w3.org/1999/xlink"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
xml
[color=rgb(0, 111, 224) !important]
:
[color=rgb(0, 45, 122) !important]
space
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"preserve"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"500"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"440"

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
!
[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
code
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
div
[color=rgb(0, 111, 224) !important]
>




使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2


[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
svgString
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
new
[color=rgb(0, 111, 224) !important]
[color=teal !important]
XMLSerializer
[color=rgb(51, 51, 51) !important]
(
[color=rgb(51, 51, 51) !important]
)

[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
serializeToString
[color=rgb(51, 51, 51) !important]
(
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
querySelector
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'svg'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;





3.4 SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]










[color=rgb(102, 102, 102) !important]
JavaScript



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7


[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
img
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
new
[color=rgb(0, 111, 224) !important]
Image
[color=rgb(51, 51, 51) !important]
(
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
new
[color=rgb(0, 111, 224) !important]
[color=teal !important]
Blob
[color=rgb(51, 51, 51) !important]
(
[color=rgb(51, 51, 51) !important]
[
[color=rgb(0, 45, 122) !important]
svgString
[color=rgb(51, 51, 51) !important][color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
{
[color=rgb(0, 45, 122) !important]
type
[color=rgb(0, 111, 224) !important]
:
[color=rgb(0, 111, 224) !important]
[color=rgb(221, 17, 68) !important]
"image/svg+xml;charset=utf-8"
[color=rgb(51, 51, 51) !important]
}
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;


[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
DOMURL
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
self
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
URL
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
||
[color=rgb(0, 111, 224) !important]
self
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
webkitURL
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
||
[color=rgb(0, 111, 224) !important]
self
[color=rgb(51, 51, 51) !important]
;

[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
url
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
DOMURL
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
createObjectURL
[color=rgb(51, 51, 51) !important]
(
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;


[color=rgb(0, 45, 122) !important]
img
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
src
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
url
[color=rgb(51, 51, 51) !important]
;




然后，当图像加载完成后，再将它绘制到<canvas>元素。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]










[color=rgb(102, 102, 102) !important]
JavaScript



[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5


[color=rgb(0, 45, 122) !important]
img
[color=rgb(51, 51, 51) !important]
.
[color=rgb(0, 45, 122) !important]
onload
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
function
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
(
[color=rgb(51, 51, 51) !important]
)
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
{

[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
canvas
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
document
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getElementById
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'canvas'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
var
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
ctx
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
=
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
canvas
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
getContext
[color=rgb(51, 51, 51) !important]
(
[color=rgb(221, 17, 68) !important]
'2d'
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
ctx
[color=rgb(51, 51, 51) !important]
.
[color=teal !important]
drawImage
[color=rgb(51, 51, 51) !important]
(
[color=rgb(0, 45, 122) !important]
img
[color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 153, 153) !important]
0
[color=rgb(51, 51, 51) !important]
,
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 153, 153) !important]
0
[color=rgb(51, 51, 51) !important]
)
[color=rgb(51, 51, 51) !important]
;

[color=rgb(51, 51, 51) !important]
}
[color=rgb(51, 51, 51) !important]
;





四、实例：折线图
下面将一张数据表格画成折线图。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6


[color=rgb(0, 45, 122) !important]
Date
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 45, 122) !important]
Amount

[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
--
[color=rgb(0, 111, 224) !important]
--

[color=rgb(0, 153, 153) !important]
2014
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
01
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
01
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
10

[color=rgb(0, 153, 153) !important]
2014
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
02
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
01
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
20

[color=rgb(0, 153, 153) !important]
2014
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
03
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
01
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
40

[color=rgb(0, 153, 153) !important]
2014
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
04
[color=rgb(0, 111, 224) !important]
-
[color=rgb(0, 153, 153) !important]
01
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
|
[color=rgb(0, 111, 224) !important]
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
80




上面的图形，可以画成一个坐标系，Date作为横轴，Amount作为纵轴，四行数据画成一个数据点。
[backcolor=rgb(248, 248, 255) !important]
[backcolor=rgb(238, 238, 238) !important][color=rgb(102, 102, 102) !important]













[color=rgb(170, 170, 170) !important]
1

[color=rgb(170, 170, 170) !important]
2

[color=rgb(170, 170, 170) !important]
3

[color=rgb(170, 170, 170) !important]
4

[color=rgb(170, 170, 170) !important]
5

[color=rgb(170, 170, 170) !important]
6

[color=rgb(170, 170, 170) !important]
7

[color=rgb(170, 170, 170) !important]
8

[color=rgb(170, 170, 170) !important]
9

[color=rgb(170, 170, 170) !important]
10

[color=rgb(170, 170, 170) !important]
11

[color=rgb(170, 170, 170) !important]
12

[color=rgb(170, 170, 170) !important]
13

[color=rgb(170, 170, 170) !important]
14

[color=rgb(170, 170, 170) !important]
15

[color=rgb(170, 170, 170) !important]
16

[color=rgb(170, 170, 170) !important]
17

[color=rgb(170, 170, 170) !important]
18

[color=rgb(170, 170, 170) !important]
19


[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
svg
[color=rgb(0, 45, 122) !important]
width
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"350"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
height
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"160"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
g
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
class
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"layer"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
transform
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"translate(60,10)"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
circle
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"105"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
circle
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"90"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"90"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
circle
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"180"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"60"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
circle
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
r
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cx
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"270"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
cy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>


[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
g
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
class
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"y axis"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
line
[color=rgb(0, 45, 122) !important]
x1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"120"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"-40"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"105"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
10
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"-40"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
dy
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"5"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(51, 51, 51) !important]
$
[color=rgb(0, 153, 153) !important]
80
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
g
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
g
[color=rgb(0, 111, 224) !important]
[color=rgb(128, 0, 128) !important]
class
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"x axis"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
transform
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"translate(0, 120)"
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=teal !important]
line
[color=rgb(0, 45, 122) !important]
x1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y1
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"270"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y2
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"0"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"-30"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
>
January
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 153, 153) !important]
2014
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
text
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
x
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"240"
[color=rgb(0, 111, 224) !important]
[color=rgb(0, 45, 122) !important]
y
[color=rgb(0, 111, 224) !important]
=
[color=rgb(221, 17, 68) !important]
"20"
[color=rgb(0, 111, 224) !important]
>
[color=rgb(0, 45, 122) !important]
April
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
text
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
g
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
g
[color=rgb(0, 111, 224) !important]
>

[color=rgb(0, 111, 224) !important]
<
[color=rgb(0, 111, 224) !important]
/
[color=rgb(0, 45, 122) !important]
svg
[color=rgb(0, 111, 224) !important]
>





五、参考链接


avatar
文章
阅读
粉丝