| 程式碼 | 功能 |
|---|---|
| <stroke> | 邊框、線條顏色 |
| <stroke-width> | 邊框、線條粗細 |
| <fill> | 圖形、文字填滿顏色 |
程式碼
<svg width="500" height="200" style="border: 1px solid rgb(96, 96, 96)">
<rect x="40" y="40" width="300" height="100"
style="stroke: rgb(248, 204, 61); stroke-width: 6; fill: none"/>
</svg>
| 程式碼 | 功能 |
|---|---|
| <font-size> | 文字尺寸 |
| <opacity> | 圖形透明度 |
| <visibility> | 圖形是否可視 |
程式碼
<svg width="500" height="200" style="border: 1px solid rgb(96, 96, 96)">
<text x="50,100,180" y="80,140,40"
fill="rgb(248, 117, 61)" text-anchor="start" font-size="1em">
猜 誰
</text>
<text x="100" y="140"
fill="rgb(248, 204, 61)" text-anchor="start" font-size="3em">
猜
</text>
<text x="240,360" y="180,160" opacity="0.4"
fill="rgb(248, 117, 61)" text-anchor="start" font-size="4em">
被
</text>
<text x="360" y="160" opacity="0.8"
fill="rgb(248, 204, 61)" text-anchor="start" font-size="2em">
隱
</text>
<text x="430" y="160" visibility="hidden"
fill="rgb(248, 117, 61)" text-anchor="start" font-size="2em">
藏
</text>
<text x="480" y="80"
fill="rgb(248, 117, 61)" text-anchor="start" font-size="2em">
了
</text>
</svg>
| 程式碼 | 功能 |
|---|---|
| <rotate> | 圖形旋轉(搭配動畫使用) |
| <transform> | 圖形變形 |
程式碼
<svg width="500", height="200" style="border:1px solid rgb(96, 96, 96)">
<polygon points="200,10 250,190 160,180"
style="fill:rgb(248, 204, 61); stroke:rgb(248, 117, 61); stroke-width: 3"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(60)
scale(1 0.6)"
/>
</svg>
更多屬性可參考 MDN SVG Attribute reference