SVG 系列文章 》
透過 text 元素可以在網頁上描繪出指定的文字內容。
這一行text 元素以 100, 100 座標位置為參考基礎,描繪出其中的文字內容,x,y 座標是文字開始輸出的左下角端點位置。
這段text設定下方描繪一條輔助線,其中說明了 text 元素的 x,y 座標屬性與文字輸出的位置關係。
如果要垂直配置文字,可以設定 writing-mode 屬性為 tb 即可。
接下來針對其中的 text 設定以下的樣式 :
最後會得到直書格式的輸出結果。
SVG 系列文章 》
透過 text 元素可以在網頁上描繪出指定的文字內容。
<text x="100" y="100">康廷數位 RWD 專業課程</text>
這一行text 元素以 100, 100 座標位置為參考基礎,描繪出其中的文字內容,x,y 座標是文字開始輸出的左下角端點位置。
<svg style="background-color:#f7f7f7;width:600px;height:220px;">
<text x="100" y="100" style="font-size:36px;">康廷數位 RWD 專業課程</text>
<line x1="100" y1="100" x2="520" y2="100"
style="stroke:#f00;stroke-width:1px;" />
</svg>
這段text設定下方描繪一條輔助線,其中說明了 text 元素的 x,y 座標屬性與文字輸出的位置關係。
如果要垂直配置文字,可以設定 writing-mode 屬性為 tb 即可。
<svg style="background-color:#f7f7f7;width:700px;height:460px;">
<text x="600" y="80" style="font-size:1.5em;">將進酒 李白</text>
<text x="530" y="40">君不見黃河之水天上來,奔流到海不復回。</text>
<text x="500" y="40">君不見高堂明鏡悲白髮,朝如青絲暮成雪。</text>
<text x="470" y="40">人生得意須盡歡,莫使金樽空對月。</text>
<text x="430" y="40">天生我材必有用,千金散盡還復來。</text>
<text x="400" y="40" >烹羊宰牛且為樂,會須一飲三百杯。</text>
<text x="340" y="40">岑夫子,丹丘生,將進酒,君莫停。</text>
<text x="310" y="40">與君歌一曲,請君為我側耳聽。</text>
<text x="280" y="40">鐘鼓饌玉不足貴,但願長醉不願醒。</text>
<text x="250" y="40">古來聖賢皆寂寞,惟有飲者留其名。</text>
<text x="220" y="40">陳王昔時宴平樂,鬥酒十千恣讙謔。</text>
<text x="160" y="40">主人何為言少錢,徑須沽取對君酌。</text>
<text x="130" y="40">
五花馬,千金裘,
</text>
<text x="100" y="40">
呼兒將出換美酒,與爾同銷萬古愁。
</text>
</svg>
接下來針對其中的 text 設定以下的樣式 :
text{font-size:1.2em;writing-mode:tb;}
最後會得到直書格式的輸出結果。
SVG 系列文章 》
沒有留言:
張貼留言