SVG Learning Series 02-Simple SVG graphics and lines

Rectangular <rect/>

<svgversion= "1.1"Baseprofile= "full"width= "+"Height= "$">    <rectx= " the"y= " the"Rx= "5"ry= "5"width= "+"Height= "+"Fill= "Teal" /></svg>

1. x：Defines the point in the upper-left corner of the rectangle. xCoordinates 2, Y: Defines the y-coordinate of the point at the upper-left corner of the rectangle 3, Rx: Defines the X-direction fillet radius of Four corners of the rectangle 4, ry: Defines the Y-direction fillet radius Four, Width: Defines the width of the rectangle 5, Height: Defines the height of the rectangle, circular <circle/>

<svgversion= "1.1"Baseprofile= "full"width= "+"Height= "$">    <CircleCX= "Max"Cy= "+"R= " the"Fill= "Blue" />    </svg>

1, CX: center x coordinate 2, CY: center y coordinate 3, R: Circle radius ellipse <ellipse/>

<svgversion= "1.1"Baseprofile= "full"width= "+"Height= "$">    <EllipseCX= "Max"Cy= "+"Rx= " the"ry= "+"Fill= "Blue" />    </svg>

1, CX: Ellipse center point x coordinate 2, CY: Ellipse center point y coordinate 3, Rx: Ellipse horizontal radius 4, ry: Ellipse vertical radius line <line/>

<svgversion= "1.1"Baseprofile= "full"width= "+"Height= "$">      < LineX1= "+"Y1= "$"X2= "+"y2= " the"Stroke= "#000"Stroke-width= "5" /></svg>

1. X1: Line start x coordinate 2, y1: line start y coordinate 3, X2: Line end x coordinate 4, y2: line end y coordinate polyline <polyline/>

<svgversion= "1.1"Baseprofile= "full"width= "+"Height= "$">      <polylinepoints= "Ten," "175 ," 175, 175, 225, 225, "Fill= "None"Stroke= "#000"/></svg>

 1, points: polyline Various point coordinates note: fill= "None" is set. Polygon <polygon/>

 <  svg  version  = "1.1"   Baseprofile  = "full"   = "  height  = "      >  <  polygon  points   = "," 175, "175, 175, 225, 225, 
     
       "and style=" color: #ff0000; " > fill 
      = "#000"  />  </ svg  >  

1. Points: Polygon coordinates of each point

SVG Learning Series 02-Simple SVG graphics and lines