学习SVG系列（2）：SVG图形系列

SVG形状：

矩形 <rect>

圆形 <circle>

椭圆 <ellipse>

线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

矩形

<?xml version="1.0"?>

<svg viewBox="0 0 120 120" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="60" cy="60" r="50"/>

</svg>

circle标签用于创建一个圆，cx表示圆心横坐标，cy表示圆心纵坐标，r表示圆心半径，默认填充为黑色 ，用fill来设置填充颜色

椭圆

<?xml version="1.0"?>

<svg width="120" height="120"

viewPort="0 0 120 120" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<ellipse cx="60" cy="60" rx="50" ry="25"/></svg>

ellipse用于创建一个椭圆，cx、cy用于设置圆心的横坐标、纵坐标，rx用于设置横轴，ry用于设置纵轴，默认为填充颜色为黑色

图片

<svg width="100%" height="100%" viewBox="0 0 100 100"

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" />

</svg>

image用于加载一张图片，xlink:href属性用于连接图片资源路径，x、y开始坐标点位置，height、width照片宽高

画线

<svg width="120" height="120"

version="1.1"

xmlns="http://www.w3.org/2000/svg">

<line x1="20" y1="100"

x2="100" y2="20"

stroke="black"

stroke-width="2" />

</svg>

line标签用于创建一条线，x1,y1初始坐标轴点，x2,y2终止坐标点

画路线图

<svg width="100%" height="100%" viewBox="0 0 400 400"

xmlns="http://www.w3.org/2000/svg">

<path d="M 100 100 L 300 100 L 200 300 z"

fill="orange" stroke="black" stroke-width="3" />

</svg>

path标签用于创建一个路径，d表示一系列的坐标值

d值解析：

M x,y = moveto,将画笔移到指定的坐标位置

L x,y = lineto,划线到指定的坐标位置

H x = horiziontal lineto,画水平线到指定的X坐标位置

V y = vertical lineto,画垂直线到指定的Y坐标位置

C x1,y1 x2,y2 endx,endy 三次贝赛曲线

T x,y = smooth quadratic Belzier curveto,映射

A Rx,Ry,XROTATION,FLAG1,FLAG2,x,y = elliptical Arc,弧线

Z = closepath() , 关闭路径

A指令：

Rx,Ry 指所在椭圆的半轴大小

XROTATION指椭圆的x轴与水平方向顺时针方向夹角，可以想象成一个水平的椭圆绕中心顺时针旋转的角度

FLAG1有两个值，1表示大角弧线，0表示小角度弧线

FLAG2 有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

x,y 为终点坐标

多边形

<svg width="120" height="120"

viewPort="0 0 120 120" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>

</svg>

polygon标签用于创建多边形

points值，多对坐标值表示

折线

<svg width="120" height="120"

viewPort="0 0 120 120" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/></svg>

polygon用于创建折线

points值，多对坐标值表示

矩形

<svg width="120" height="120"

viewBox="0 0 120 120"

xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10"

width="100" height="100"

rx="15" ry="15"/></svg>

rect标签用于创建一个矩形

x,y表示起始坐标

rx,ry 表示四个角的弧度