不定更新、可能爛尾XD
學習資源: W3Schools、其他網路資料
之前有段時間挺忙的,所以停更了好一陣子 ಥ⌣ಥ,但至少還沒爛尾 ٩(๑❛ᴗ❛๑)۶。
原本按照W3Schools的SVG教學,這篇筆記應該是關於Path的內容,不過SVG的Path實在是有點複雜(也可以說是SVG中最難的部分),所以我會放在比較後面才去寫筆記整理重點。
SVG : 文字
(僅列出部分有使用到的屬性)
-
<svg></svg>
- height : 整個圖形(畫布)的原始長度
- width: 整個圖形(畫布)的原始寬度
-
<text></text>
或 <text />
- x : 文字的x坐標
- y : 文字的y坐標
- fill : 文字顏色
- fill-opacity : 文字顏色透明度
- font-size : 文字大小
- font-weight : 文字寬度
- stroke : 文字外框顏色
- stroke-width : 文字外框寬度
- stroke-opacity : 文字外框顏色的透明度
(stroke的這三個屬性可以用,但沒必要用。)
範例1
![](https://i.imgur.com/JtQam0D.png)
1 2 3 4 5 6
| <svg height="300" width="400"> <text x="0" y="30" fill="blue" fill-opacity="0.5" font-size="24px" font-weight="bolder">我愛SVG</text> <text x="0" y="70" fill="blue" fill-opacity="1" font-size="32px" font-weight="bolder">我愛SVG</text> </svg>
|
範例2
![](https://i.imgur.com/eYmYFsK.png)
使用stroke相關屬性會蓋過fill屬性設定的文字顏色。
1 2 3 4 5 6
| <svg height="300" width="400"> <text x="0" y="30" fill="blue" fill-opacity="0.5" font-size="24px" stroke="green" stroke-width="0.5" font-weight="bolder">我愛SVG</text> <text x="0" y="70" fill="blue" fill-opacity="1" font-size="32px" stroke="green" stroke-width="2" stroke-opacity="0.7" font-weight="bolder">我愛SVG</text> </svg>
|
範例3
![](https://i.imgur.com/OWDhGB6.png)
我們也可以使用transform屬性來旋轉(rotate)文字。
rotate(deg x,y),deg是旋轉角度,x、y是旋轉起始點坐標。
1 2 3 4 5 6
| <svg height="300" width="400"> <text x="0" y="30" fill="blue" fill-opacity="0.5" font-size="24px" stroke="green" stroke-width="0.5" font-weight="bolder">我愛SVG</text> <text x="15" y="75" fill="blue" fill-opacity="1" font-size="32px" font-weight="bolder" transform="rotate(30 20,40)">我愛SVG</text> </svg>
|
範例4
![](https://i.imgur.com/AYDLmP3.png)
<text></text>
標籤裡面也可以有子標籤<tspan></tspan>
。
1 2 3 4 5 6
| <svg height="300" width="400"> <text x="15" y="50" fill="blue" font-size="32px" font-weight="bolder">我愛SVG <tspan x="15" y="90" font-size="24px">第一行文字</tspan> <tspan x="15" y="130" font-size="24px">第二行文字</tspan> </text> </svg>
|
範例5
![](https://i.imgur.com/JZGkptg.png)
<text></text>
也可以被<a></a>
包起來作為外部連結。
1 2 3 4 5
| <svg height="300" width="400"> <a href="https://www.w3schools.com/graphics/" target="_blank"> <text x="15" y="50" fill="blue" font-size="32px" font-weight="bolder">我愛SVG</text> </a> </svg>
|
(W3Schools教學寫的是xlink:href,不過我查過文件後,發現它被MDN Web Docs列為Deprecated,應該要用href取代。)
參考資料
SVG text - W3Schools
SVG Transformation - MDN
href and xlink:href on same element, and error handling