svg 的文字- text

要在 svg 裡繪製文字需要使用 text 的標籤，這邊可以替文字設定外框及填滿顏色，是跟一般網頁文字比較不一樣的地方。

還可以使用以下屬性調整文字樣式
font-family: 字型
font-weight: 文字粗細
font-style: 大概就是正常跟斜體
text-decoration: 文字裝飾，有 none, underline, overline, line-through 可以用
word-spacing: 字與字的間距
letter-spacing: 字母與字母的間距

如果要調整文字對齊方式則可以使用 text-anchor，跟 text-align 不一樣在於 text-align 需要有空間讓文字在裡面對齊，SVG 的 text-anchor 則是依據設定的位置去讓文字對那個點做對齊的依據。

在 html 內想要調整某段文字的樣式，我們會利用 span 包起來後再設定，而 svg 的 text 則可以使用 tspan 這個標籤。

 設定 dy 可以調整文字的垂直位置。

可以像這樣各別設定每個文字的偏移位置以及旋轉角度。