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

<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属性设定的文字颜色。

<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是旋转起始点坐标。

<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>。

<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>包起来作为外部连结。

<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