SVG <text>元素用于在SVG圖像中繪制文本。在svg中使用 <text>元素,可以實現(xiàn)繪制文字,文字旋轉,多行文字,具有超級鏈接的文字等
要繪制文本，使用<text>元素。
<h1>SVG Text</h1> <svg width="550" height="150"> <g> <text x="40" y="23" >Text: </text> <text x="40" y="40" fill="rgb(121,0,121)">www.soo66.com 菜鳥教程 </text> </g> </svg>測試看看?/?
運行后效果如下:
x：它定義了文本左上角的位置。
y：它定義文本的頂部位置。
width：定義寬度。
height：定義高度。
fill：fill屬性用于定義填充顏色。
它用于創(chuàng)建旋轉文本。
<svg height="100" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">www.soo66.com</text> </svg>測試看看?/?
運行后效果如下:
x：定義左上角的位置。
y：它定義頂部位置。
width：定義寬度。
height：定義高度。
fill：fill屬性用于定義填充顏色。
它用于創(chuàng)建多行文本。使用<tspan>元素，可以將<text>元素安排在任意數(shù)量的子組中。
<svg width="570" height="100"> <g> <text x="40" y="23" >Multiline Text: </text> <text x="40" y="40" fill="rgb(121,0,121)">www.soo66.com <tspan x="40" y="60" font-weight="bold"> 在線菜鳥教程. </tspan> </text> </g> </svg>測試看看?/?
運行后效果如下:
x：定義左上角的位置。
y：它定義頂部位置。
width：定義寬度。
height：定義高度。
fill：fill屬性用于定義填充顏色。
它用于創(chuàng)建具有超級鏈接的文本。
<svg width="500" height="100"> <g> <text x="20" y="10" >Text as Link: </text> <a xlink:href="/svg-tutorial" target="_blank"> <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">www.soo66.com</text> </a> </g> </svg>測試看看?/?
運行后效果如下:
x：定義左上角的位置。
y：它定義頂部位置。
width：定義寬度。
height：定義高度。
fill：fill屬性用于定義填充顏色。