svg02-svg draw basic graphics, understand common attributes

1. Basic graphic labels and general attributes

• There are 6 basic graphics

<!-- 矩形 -->
<rect> </rect> 
<!-- 圆形-->
<circle> </circle>
<!-- 椭圆形-->
<ellipse> </ellipse>
<!-- 直线（数学上的线段） -->
<line> </line>
<!-- 多线段 -->
<polyline> </polyline>
<!-- 多边形） -->
<polygon> </polygon>

• There are also some common attributes, such as fill (fill), stroke (border), transform (transform)
  (Transform is the usage in css3)

Then learn the attribute usage of each graph together

2. Rectangle (rect)

The important thing is that in the svg coordinate system, the positive x-axis direction to the right, and the positive y-axis direction downwards.

• horizontal coordinate value from the parent coordinate system (the concept of the coordinate system will be mentioned later, remember the parent first)
• longitudinal coordinate value from the parent coordinate system
• width: width of rectangle
• height: height of rectangle
• rx: rounded corner value of horizontal
• ry: rounded corner value of longitudinal


The above example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255); stroke-width:1; stroke:rgb(0,0,0)"/>
</svg>

Three, circle (circle)

• cx: horizontal coordinate value from the parent coordinate system
• cy: longitudinal coordinate value of the circle center from the parent coordinate system
• r: radius


The above example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Four, ellipse (ellipse)

• cx: horizontal coordinate value of the circle center from the parent coordinate system
• cy: longitudinal coordinate value of the circle center from the parent coordinate system
• rx: horizontal radius
• ry: vertical radius


The above example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="150" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

Five, the straight line (line)

This definition is very simple, the coordinates of two points in mathematics

• x1: The first point of horizontal coordinate value of the parent coordinate system
• Y1: first point from a parent coordinate system longitudinal coordinate values
• x2: horizontal coordinate value of the second point of from the parent coordinate system
• y2: longitudinal coordinate value of the second point of from the parent coordinate system


The above example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

Six, polyline

points : The position collection of multiple coordinate points, just write the coordinates in a foolish way, and so on

• X1: first point from a parent coordinate system transverse coordinate values
• Y1: first point from a parent coordinate system longitudinal coordinate values
• x2: horizontal coordinate value of the second point of from the parent coordinate system
• Y2: second point from the parent coordinate system longitudinal coordinate values
... ... ...

The above example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

7. Polygon

points : Similar to multi-line segment, the difference is last point of will be connected with the first point of 161a02a9a75c94 to form a closed figure

• x1: horizontal coordinate value of the first point of from the parent coordinate system
• Y1: first point from a parent coordinate system longitudinal coordinate values
• x2: horizontal coordinate value of the second point of from the parent coordinate system
• y2: longitudinal coordinate value of the second point of from the parent coordinate system
... ... ...


The above example:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

The above is the drawing of the basic graphics, um, I learned to draw the basics~