rectangular rect

x,y： Starting point coordinates .（ top left corner ）
width,height： Wide and high .
rx,ry： radius . Specify one if , The other will be assigned the same value .

Four rectangles ：

<rect fill="red" height="50%" width="50%" x="0" y="0"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%"/>

effect ：

Rounded rectangle ：

<rect fill="red" height="50%" width="50%" x="0" y="0" rx="40"/>
<rect fill="pink" height="50%" width="50%" x="50%" y="0" rx="80"/>
<rect fill="blue" height="50%" width="50%" x="0" y="50%" rx="120"/>
<rect fill="yellow" height="50%" width="50%" x="50%" y="50%" rx="50%"/>

effect ：

round circle

cx,cy： The coordinates of the center of the circle .
r： radius .

<circle cx="300" cy="300" r="200" fill="pink"/>

effect ：

The ellipse ellipse

cx,cy： The coordinates of the center of the circle .
rx,ry： Two radii .

<ellipse cx="300" cy="300" rx="300" ry="200" fill="pink"/>

effect ：

A straight line line

x1,y1： Starting point coordinates .
x2,y2： End coordinates .

<line x1="0" y1="0" x2="300" y2="300" stroke="red" stroke-width="1"/>

effect ：

Broken line polyline

points： Coordinate string .x1 y1,x2 y2,x3 y3…

<polyline points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35,50 0" fill="red" />

effect ：

polygon polygon

Different from the broken line ： The polygon closes automatically , end to end .

<polygon points="50 0,61 35,98 35,68 57,79 91,50 70,21 91,32 57,2 35,39 35" fill="red" />

effect ：

route path

Too complicated , Let's not talk about .