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