【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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" 。