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

來源：懂視網責編：小采時間：2020-11-27 15:07:49

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

SVG制作簡單圖形的實例介紹:圓形 circle<svg width="200" height="200" > <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4&

推薦度：

點擊下載本文 文檔為doc格式

導讀SVG制作簡單圖形的實例介紹:圓形 circle<svg width="200" height="200" > <circle cx="100" cy="100" r="80" stroke="green" stroke-width="4&

圓形 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

可用于路徑數據的命令

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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com