SVG 文字輸出初探

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 系列文章 》


沒有留言: