Vector graphs defined in XML

The instance


      

<! DOCTYPEsvg PUBLIC "- / / / / W3C DTD SVG 1.1 / / EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   <! -- SVG references this external SVG DTD -->

<svg
width="100%" 
height="100%" 
version="1.1"/ / useSVGversionxmlns="http://www.w3.org/2000/svg"/ / defineSVGNamespace >

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>
Copy the code

The shape elements

  • rectangular<rect>
  • circular<circle>
  • The ellipse<ellipse>
  • line<line>
  • Broken line<polyline>
  • polygon<polygon>
  • The path<path>

attribute

Basic attributes

  • fill-opacityFill color transparency
  • stroke-opacityOpacity of contour color
  • opacityTransparency of the entire element

rect

  • xProperty defines the left-hand position of the rectangle
  • yProperty defines the top position of the rectangle
  • Rx and ryThe rectangle with rounded corners

circle

  • cxDot x, default 0
  • cyDot y, default is 0
  • rThe radius of

ellipse

  • cxCenter x, default 0
  • cyThe center y coordinate, default is 0
  • rxX radius
  • ryY radius

line

  • x1The X-axis defines the beginning of a line
  • y1The Y-axis defines the beginning of a line
  • x2The X-axis defines the end of the line
  • y2The Y-axis defines the end of the line

polyline

  • points x1,y1 x2,y2…

polygon

  • pointsThe xy coordinates of each of these points. x1,y1 x2,y2…

path

  • d
    • M = moveto
    • L = lineto
    • H = horizontal lineto
    • V = vertical lineto
    • C = curveto
    • S = smooth curveto
    • Quadratic Bezier curve Q = quadratic Bezier curve
    • T = smooth quadratic Bézier curveto
    • A = elliptical Arc
    • Z = closepath

    Upper case indicates absolute location, lower case indicates relative location.