SVG graphics encoding_html/css_WEB-ITnose

svg: can be scaled without changing quality

1. svg must have containing
2. You can draw different shapes: rectangle, circle: circle, ellipse: ellipse, line: line, polyline: polyline, polygon: polygon, path: path
3. Different labels should be used to draw different graphics. For a circle, use
4. to save svg in svg format
5. x, y represents the starting coordinates
6. fill: filled Color, stroke: the color of the painting, stroke-width: the width of the painting (in popular terms, it is the border)
7. In fact, it is similar to the canvas of css3

Rectangle: rect

<svg>  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

Rounded rectangle: set the values ​​of rx, ry (coordinates of the center of the circle)

<svg>  <circle id="circle"cx="100" cy="80" r="50" stroke="gray" stroke-width="10" fill="red">		</svg>

Circle: circle

circle: There are no x, y attributes because the circle center cx, cy has been set

<svg class="grid-50">  <rect fill="red" height="100" id="rect" stroke="gray" stroke-width="10" width="100" x="20" y="20"></rect></svg>

Ellipse:ellipse

ellipse: Ellipse In fact, it is a rectangle with rounded corners

<svg >  <ellipse  rx=100 ry=30 cx=150 cy=60 fill="yellow" stroke="gray" />	</svg> 

Line segment: line (two points determine a straight line)

<svg>  <line x1="0" y1="0" x2="200" y2="20" fill="gray" stroke="gray" stroke-width="2" /></svg>

Polyline: polyline (that is, setting multiple coordinate points)

Note that (0,0) cannot be used and is invalid

<svg>  <polyline points="0,0  0,20  20,20  20,40  40,40"  fill="white" stroke="gray" stroke-width="2" /></svg> 

Polygon: polygon

Of course for more complex graphics, you only need to know the coordinates of each point

<svg >  <polygon points="50,50 0,100 100,100 50,50" fill="blue" stroke="gray" stroke-width="1">	  </svg> 			

Path: path (all the above graphics can be drawn through path)

The following commands can be used for path data:

M = moveto //Move coordinates to

L = lineto //Draw to

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Belzier curveto

A = elliptical Arc //Ellipse

Z = closepath //End path

Note: All the above commands allow lowercase letters. Uppercase means absolute positioning, lowercase means relative positioning.

Must be written according to the rules

<svg>  <path d="M50 50 L200 50 L200 0 L50 0 Z" fill="blue" stroke="gray" stroke-width="2" />	</svg>

demo: http://2.liteng.sinaapp.com /svg/index.html

Original address url: http://liteng.org/node/51