外观
SVG 绘制文本
简单文本
svg
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="15" fill="red">I love SVG!</text>
</svg>
1
2
3
2
3
空心文本
svg
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="none" stroke="red" font-size="35">I love SVG!</text>
</svg>
1
2
3
2
3
有填充色的文本
svg
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
<text x="5" y="30" fill="pink" stroke="blue" font-size="35">I love SVG!</text>
</svg>
1
2
3
2
3
旋转文本中的每个字
svg
<svg height="40" width="200">
<text x="5" y="30" fill="red" font-size="35" rotate="30">I love SVG!</text>
</svg>
1
2
3
2
3
整体旋转文本
svg
<svg height="100" width="200">
<text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
1
2
3
2
3