SVG 文字輸出

圖形中經常會有文字呈現的需求，例如統計圖表上的數據與指標文字標示等等。利用 text 標籤可以可以在網頁上描繪出指定的文字內容，例如以下配置：

<svg style="background-color:#ecf0fc;" width="600" height="250">
    <text x="100" y="100" font-size="24">康廷數位｜www.kangting.tw</text>
    <line x1="100" y1="100" x2="520" y2="100" stroke="#4169E1" Stroke-width="0.5" />
</svg>

x 與 y 屬性為文字輸出位置的參考起點座標，表示從座標點（100,100） 開始輸出文字， font-size 為輸出的文字大小，開始與結束標籤中間的文字為要輸出的內容。接下來以 line 標籤描繪一條水平直線，起始座標點同 text 標籤，以方便輸出位置比對，以下是輸出的結果：



水平線左端的起始座標點（100,100），同時是text 標籤中 x1 與 y1 屬性定義的座標位置，現在我們可以很明確的理解，文字左下角為輸出的起點。

如果要調整文字的輸出位置，可以設定 text-anchor 屬性，可能的值包含 start , middle , end ，這些 text-anchor 屬性值表示以  x,y 座標為參考點輸出文字的方向與位置。

以下的配置分別設定不同的 text-anchor 屬性：

<svg style="background-color:#ecf0fc;" width="600" height="250">
    <text x="300" y="40">康廷數位｜www.kangting.tw</text>
    <line x1="300" y1="40" x2="520" y2="40" stroke="#e14169" Stroke-width="0.5" />

    <text x="300" y="80" text-anchor="start">康廷數位｜www.kangting.tw - start</text>
    <line x1="300" y1="80" x2="520" y2="80" stroke="#e14169" Stroke-width="0.5" />

    <text x="300" y="120" text-anchor="middle">康廷數位｜www.kangting.tw - middle</text>
    <line x1="300" y1="120" x2="520" y2="120" stroke="#e14169" Stroke-width="0.5" />

    <text x="300" y="160" text-anchor="end">康廷數位｜www.kangting.tw - end</text>
    <line x1="300" y1="160" x2="520" y2="160" stroke="#e14169" Stroke-width="0.5" />
</svg>

由上而下，有四組 text 標籤，輸出文字內容中，標示所套用的 text-anchor 屬性值，表示其設定的 text-anchor 屬性值。

沒有設定 text-anchor 屬性值同 start ，如果設定為 middle 則以 x 與 y 屬性表示的座標點為輸出文字的中心，設定為 end 則 x 與 y 屬性表示的座標點為文字輸出的終點。



從參考水平線，可以看出屬性值對於輸出位置的影響。

fill與stroke

text元素亦支援 fill 與 stroke 屬性設定，例如以下的配置：

<svg style="background-color:#ecf0fc;" width="600" height="250">
    <text x="100" y="80" fill="#e14169" stroke="#4169e1" font-size="36">
        康廷數位｜www.kangting.tw
    </text>
    <text x="100" y="140" fill="#e14169" stroke="none" font-size="36">
        康廷數位｜www.kangting.tw
    </text>
    <text x="100" y="200" fill="none" stroke="#4169e1" font-size="36">
        康廷數位｜www.kangting.tw
    </text>
</svg>

三組 text 元素分別設定不同的 stroke 與 fill 樣式屬性，stroke 指定描繪文字的線條框線，fill 則填滿文字內部，指定為 none 則沒有顏色。



另外，透過 stroke-width 樣式屬性的設定可以進一步調整 stroke 輸出的文字框線寬度。

字距空間

如果要調整文字的間距，可以透過 word-spacing 屬性進行設定。

<svg style="background-color:#ecf0fc;" width="600" height="120">
    <text x="60" y="40" font-size="24">
        康廷數位 kangting
    </text>
    <text x="60" y="80" font-size="24" word-spacing="48">
        康廷數位 kangting
    </text>
</svg>

第一個 text標籤並沒有指定word-spacing屬性，以預設間隔輸出，第二行則指定為 48 。



直行輸出

文字可以透過 writing-mode 樣式屬性的設定，以直書格式輸出，例如以下的輸出：



要達到這個效果，必須設定屬性如下：

<svg  style="background-color:#ecf0fc;"  width="340" height="360" writing-mode="tb">
    <text x="100" y="10">君不見黃河之水天上來，奔流到海不復回</text>
</svg>

其中的 writing-mode="tb" 將以直書輸出文字內容。

統計圖標示

統計圖表經常需要標示數據與內容說明等相關資訊，現在我們可以利用 text 標籤在統計圖表上標示要呈現的文字與數字內容，例如以下的輸出：



這是討論矩形描繪時，示範的模擬圖表，這裏利用 text 標籤補上相關的說明資訊，我們現在有一個完整的基礎圖表，以下是相關的配置：

<svg style="background-color:#ecf0fc;" width="600" height="300">
    <text x="120" y="40" fill="#4169e1">K-TWO 手機歷年銷售統計</text>
    <text x="20" y="40" fill="#4169e1" writing-mode="tb">單位（仟）</text>

    <line x1="40" y1="20" x2="40" y2="260" stroke="#4169e1" />
    <line x1="40" y1="260" x2="520" y2="260" stroke="#4169e1" />

    <rect x="120" y="120" height="140" width="30" fill="#4169e1" />
    <text x="120" y="110" fill="#4169e1">140</text>
    <text x="120" y="280" fill="#4169e1">2014</text>

    <rect x="220" y="80" height="180" width="30" fill="#e14169" />
    <text x="220" y="70" fill="#e14169">180</text>
    <text x="220" y="280" fill="#4169e1">2015</text>

    <rect x="320" y="180" height="80" width="30" fill="#69e141" />
    <text x="320" y="170" fill="#69e141">80</text>
    <text x="320" y="280" fill="#4169e1">2016</text>

    <rect x="420" y="60" height="200" width="30" fill=" #6941e1" />
    <text x="420" y="50" fill="#6941e1">200</text>
    <text x="420" y="280" fill="#4169e1">2017</text>
</svg>

其中均是已經討論過的技巧，透過座標定位輸出對應的文字資訊，單位標示因為需要直行輸出，因此設定了  writing-mode="tb" 。