svg簡單的應用

一、能夠直接在html內寫svg

（1）width寬度，height高度

（2）xmlns svg的規則

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22"
></svg>

二、rect節點

（1）長方形

（2）x、y位置

（3）rx、ry圓大小

（4）fill填充顏色

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<rect x="10" y="14" width="300" rx="7" ry="7" height="14" fill="#972716" />
</svg>

三、circle節點

（1）圓形

（2）cx、cy位置

（3）r圓直徑

（4）fill填充顏色

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<circle cx="149" cy="11" r="11" fill="#972716" />
</svg>

四、path畫線節點

（1）畫線

（2）d畫線的內容

　　一、M原點

　　二、Q弧線

　　三、L直線

　　四、Z閉合

（3）fill填充

（4）stroke描邊

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<path 
    d="
    M 0 11 
    Q 0 4 7 4
    L 136.5 4
    Q 136.5 0 143 0
    Q 149.5 0 149.5 4
    L 200 4
    L 200 11
    Q 200 4 193 4 
    L 200 4
    L 200 18
    L 193 18
    Q 200 18 200 11
    L 200 18
    L 0 18
    Z
    " 
    stroke="black"
    fill="transparent"
  >
</svg>