SVG <text>繪製文字

admin發表於2018-09-24
SVG

SVG與cavnas類似，都可以繪製文字，並且可以對文字的表現形式進行設定。

比如可以對SVG繪製的文字進行填充或者描邊。

但是SVG繪製的文字域canvas繪製文字相比在某些場景下會更具有優勢。

首先看一個canvas繪製文字截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/24/002719k68lal8hj18lijst.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

canvas繪製的文字本質上是以圖片形式展現的，這樣我們就無法進行選中或者賦值黏貼等操作，也不容易被搜尋引擎識別（據說現在搜尋引擎可以識別圖片上的文字，估計當前效果也不是太好），對於搜尋引擎優化也不太好。

而SVG繪製的文字是真正意義上的文字，與普通文字沒有區別。

使用<text>元素可以實現繪製文字的效果，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border:1px solid blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="0" y="0">softwhy</text>
</svg>
</body>
</html>

上面程式碼演示了最為簡單的繪製效果，程式碼分析如下：

（1）.繪製字串"softwhy"。

（2）.設定<text>元素的x和y屬性值都為0，如果沒有看到文字具體渲染效果，可能會認為文字會緊貼svg矩形框內部的左上角繪製，但實際下過是在水平方位沒有疑問，在垂直方位

（3）.出現上述效果的原因是，y規定的是文字基線座標。

關於基線的概念可以參閱line-height屬性的行內框和行框等內容介紹一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border:1px solid blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="0 10 40 60" y="20 40">softwhy</text>
</svg>
</body>
</html>

上面程式碼中，x和y的屬性值是數列，下面對程式碼做一下分析。

（1）.x與y屬性值是一個數列。

（2）.以x屬性值為例子，0規定第一個字元"s"距離左側的距離，10表示第二個字元"o"距離左側的距離，以此類推。然而字串有7個字元，但是數列中才有四個引數，那麼四個引數應用於字串中的前四個字元，剩餘的字元緊貼最後一個字元依次排列，對於y屬性值也是同樣的道理。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border:1px solid blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="200" height="200">
  <text x="50%" y="50%">softwhy</text>
</svg>
</body>
</html>

上面程式碼中，x和y屬性值是百分比，參考值是viewport視窗的尺寸。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  border:1px solid blue;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="300" height="400">
  <text x="10 30" y="0" dx="10,30" dy="10,20">softwhy</text>
</svg>
</body>
</html>

上面程式碼中，不但規定了x和y屬性，而且還有dx和dy屬性。

x和y規定的是位置的絕對值，而dx和dy則是規定的一個絕對值的增量。

例如字元"s"使用x屬性規定距離左側的絕對位置是10，那麼它的最終位置要在10的基礎上再加10。與x和y屬性值類似，dx和dy的屬性值也可以是百分比，參考viewport視窗的尺寸。

相關文章