圖形中經常會有文字呈現的需求,例如統計圖表上的數據與指標文字標示等等。利用 text 標籤可以可以在網頁上描繪出指定的文字內容,例如以下配置:
x 與 y 屬性為文字輸出位置的參考起點座標,表示從座標點(100,100) 開始輸出文字, font-size 為輸出的文字大小,開始與結束標籤中間的文字為要輸出的內容。接下來以 line 標籤描繪一條水平直線,起始座標點同 text 標籤,以方便輸出位置比對,以下是輸出的結果:
水平線左端的起始座標點(100,100),同時是text 標籤中 x1 與 y1 屬性定義的座標位置,現在我們可以很明確的理解,文字左下角為輸出的起點。
如果要調整文字的輸出位置,可以設定 text-anchor 屬性,可能的值包含 start , middle , end ,這些 text-anchor 屬性值表示以 x,y 座標為參考點輸出文字的方向與位置。
以下的配置分別設定不同的 text-anchor 屬性:
由上而下,有四組 text 標籤,輸出文字內容中,標示所套用的 text-anchor 屬性值,表示其設定的 text-anchor 屬性值。
沒有設定 text-anchor 屬性值同 start ,如果設定為 middle 則以 x 與 y 屬性表示的座標點為輸出文字的中心,設定為 end 則 x 與 y 屬性表示的座標點為文字輸出的終點。
從參考水平線,可以看出屬性值對於輸出位置的影響。
fill與stroke
text元素亦支援 fill 與 stroke 屬性設定,例如以下的配置:
三組 text 元素分別設定不同的 stroke 與 fill 樣式屬性,stroke 指定描繪文字的線條框線,fill 則填滿文字內部,指定為 none 則沒有顏色。
另外,透過 stroke-width 樣式屬性的設定可以進一步調整 stroke 輸出的文字框線寬度。
字距空間
如果要調整文字的間距,可以透過 word-spacing 屬性進行設定。
第一個 text標籤並沒有指定word-spacing屬性,以預設間隔輸出,第二行則指定為 48 。
直行輸出
文字可以透過 writing-mode 樣式屬性的設定,以直書格式輸出,例如以下的輸出:
要達到這個效果,必須設定屬性如下:
其中的 writing-mode="tb" 將以直書輸出文字內容。
統計圖標示
統計圖表經常需要標示數據與內容說明等相關資訊,現在我們可以利用 text 標籤在統計圖表上標示要呈現的文字與數字內容,例如以下的輸出:
這是討論矩形描繪時,示範的模擬圖表,這裏利用 text 標籤補上相關的說明資訊,我們現在有一個完整的基礎圖表,以下是相關的配置:
其中均是已經討論過的技巧,透過座標定位輸出對應的文字資訊,單位標示因為需要直行輸出,因此設定了 writing-mode="tb" 。
<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>
<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 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 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 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>
<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>
<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" 。
沒有留言:
張貼留言