基本圖形和屬性
基本圖形：
<rect><circle><ellipse><line><polyline><polygon>
基本屬性：
-
fill: 填充 -
stroke: 描邊 -
stroke-width: 描邊寬度 -
transform: 變型 css3的transform屬性一致
<rect>
包含屬性：
-
x: x軸坐標(biāo) -
y: y軸坐標(biāo) -
width：矩形寬 -
height： 矩形高 -
rx：圓角 -
ry： 圓角
其中圓角的值如果只給一個(gè)值术荤，另一個(gè)自動(dòng)的等于已給的值
#1 rect.jpg
示例
<svg>
<rect x="10" y="10" width="100" height="50" fill="green" rx="10"></rect>
</svg>
<circle>
圓
包含屬性：
-
cx: 圓心x的位置 -
cy: 圓心y的位置 -
r： 圓的半徑
#2 circle.jpg
示例：
# 使用fill="transparent" 是因?yàn)閟vg會(huì)自動(dòng)填充黑色
<svg>
<circle cx="100" cy="100" r="30" stroke="red" stroke-width="10" fill="transparent"></circle>
</svg>
<ellipse>
橢圓世剖，在圓的基礎(chǔ)上多一個(gè)半徑
包含屬性：
-
cx: 圓心x的位置 -
cy: 圓心y的位置 -
rx： 橢圓橫軸方向的半徑 -
ry: 橢圓縱軸方向的半徑
#3 ellipse.jpg
示例：
<svg>
<ellipse cx="60" cy="60" rx="50" ry="25" fill="pink"/>
</svg>
<line>
直線：
包含屬性：
-
x1: 第一點(diǎn)橫坐標(biāo) -
y1: 第一個(gè)點(diǎn)縱坐標(biāo) -
x2：第二點(diǎn)橫坐標(biāo) -
y2: 第二個(gè)點(diǎn)縱坐標(biāo)
#4 line.jpg
示例：
<svg>
<line x1="10" y1="10" x2="100" y2="100" stroke="blue"></line>
</svg>
<polyline>
折線，含有多個(gè)點(diǎn)，不會(huì)自動(dòng)閉合第一個(gè)點(diǎn)
包含屬性：
-
points: 格式是(xi, yi)一次的描述點(diǎn)的位置丧荐， 使用空格或者逗號(hào)分隔開都可以
#5 polyline.jpg
示例：
<svg>
<polyline points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>
// 或者使用逗號(hào)分割
<svg>
<polyline points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>
<polygon>
多邊形和折線的唯一區(qū)別在于辱魁，多邊形會(huì)把第一個(gè)點(diǎn)和最后一個(gè)點(diǎn)自動(dòng)的閉合起來(lái)
包含屬性：
-
points: 格式是(xi, yi)一次的描述點(diǎn)的位置莫绣， 使用空格或者逗號(hào)分隔開都可以
#6 polygon.jpg
示例：
<svg>
<polygon points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polygon>
</svg>
// 或者使用逗號(hào)分割
<svg>
<polygon points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent" />
</svg>
本文來(lái)自學(xué)習(xí)筆記svg - 慕課網(wǎng)
