技術類文章

SVG 自學微筆記(05) - 在圖上加文字

不定更新、可能爛尾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

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

使用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

我們也可以使用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

<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

<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

分享到