SVG 文字排版

admin發表於2018-08-10
SVG
本章節介紹一下SVG文字排版的相關知識內容。

一.text-anchor:

此屬性規定文字的哪個部分放置在text元素中的x屬性定義的位置。

預設是文字左邊部分，即文字的開始處。

你也可以設定為middle，使它位於文字的中間；設定為end，使它位於文字的右邊。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/10/002203f8wfwkrhztetwrdz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼例項如下:

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

二.letter-spacing屬性:

此屬性功能和css的letter-spacing完全相同，用來規定字元之間的距離。

程式碼例項如下:

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

我們也可以使用與css對應的letter-spacing來設定，如下:

[CSS] 純文字檢視 複製程式碼
text {
  letter-spacing:4px;
}

三.word-spacing屬性:

用來設定單詞的間距和css的word-spacing功能相同，程式碼例項如下:

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

我們也可以使用與css對應的letter-spacing來設定，如下:

[CSS] 純文字檢視 複製程式碼
text {
  word-spacing:10;
}

三.writing-mode屬性:

此屬性可以規定文字的書寫方向。

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

上面只演示了tb（Top to Bottom）屬性值，其他屬性值，大家可以自行測試。

相關文章