SVG制作簡單圖形的實例介紹

圓形 circle

<svg width="200" height="200" >      <circle           cx="100"           cy="100"           r="80"           stroke="green"           stroke-width="4"           fill="none"/>  </svg>

矩形 rect

<svg>      <rect           x="10"           y="10"           rx="5"           ry="5"           width="150"           height="100"           stroke="red"           fill="none">      </rect>  </svg>

橢圓 ellipse

<svg>      <ellipse           cx="400"           cy="60"           rx="70"           ry="50"           stroke="red"           fill="none">      </ellipse>  </svg>

線 line

<svg>      <line           x1="10"           y1="120"           x2="160"           y2="220"           stroke="red">      </line>  </svg>

折線 polyline

<svg>      <line           x1="10"           y1="120"           x2="160"           y2="220"           stroke="red">      </line>  </svg>

多邊形 polygon

<svg>      <polygon           points="250 120                   300 220                  200 220"          stroke="red"          stroke-width="5"          fill="yellow"          transform="translate(150 0)">      </polygon>  </svg>

路徑 path

可用于路徑數(shù)據(jù)的命令

M = moveto  L = lineto  H = horizontal lineto  V = vertical lineto  C = curveto  S = smooth curveto  Q = quadratic Belzier curve  T = smooth quadratic Belzier curveto  A = elliptical Arc  Z = closepath    <svg>      <path       d="M250 150 L150 350 L350 350 Z" />  </svg>