SVG 旋轉文字字元

admin發表於2018-08-04
SVG字元

關於文字的基本操作可以參閱SVG <text>繪製文字一章節。

<text>元素的rotate可以以指定角度旋轉文字中的字元。

首先看一段程式碼例項：

[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="20" y="20" rotate="40">螞蟻部落</text>
</svg>
</body>
</html>

rotate引數值是一個數列，用來規定旋轉的度數，單位可以省略，預設是deg。

字元應用角度規則：

（1）.如果只有一個引數，所有文字都旋轉同一個角度。

（2）.如果規定多個引數，第一個引數用於第一個字元，第二個引數用於第二個字元，以此類推。

程式碼例項如下：

[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="20" y="20" rotate="0 45 90">螞蟻部落</text>
</svg>
</body>
</html>

特別注意："落"沒有顯式規定旋轉角度，那麼它的旋轉角度和前一個字元"部"相同。

相關文章