SVG <tspan>元素

admin發表於2018-09-03
SVG

使用<text>可以實現文字的簡單繪製，具體參閱SVG <text>繪製文字一章節。

但<text>繪製功能過於簡單，很多常見的功能實現起來都比較困難，比如內部文字換行。

再比如單獨設定文字某一部分的樣式，也很困難，使用<tspan>可以有效的解決類似問題。

大家都對HTML的<span>元素比較熟悉，不妨認為<tspan>是SVG中的<span>元素。

程式碼例項如下:

[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;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>螞蟻部落一</tspan>
    <tspan>螞蟻部落二</tspan>
  </text> 
</svg>
</body>
</html>

<tspan>元素以行內元素方式順序排列，中間是有一個空格。

特別說明：

（1）.中間的空格並不是<tspan>元素天然的屬性，而是由於換行導致的。

（2）.<text>元素對於換行或者空格的處理與HTML的相同。

一.<tspan>的x和y屬性:

用x和y屬性可以對tspan元素的文字進行定位。

程式碼例項如下:

[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;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>螞蟻部落一</tspan>
    <tspan x="10" y="0">螞蟻部落二</tspan>
  </text> 
</svg>
</body>
</html>

x和y規定字元的絕對座標（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 red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>螞蟻部落一</tspan>
    <tspan x="10 40" y="0 20">螞蟻部落二</tspan>
  </text> 
</svg>
</body>
</html>

x和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 red;
  overflow:visible;
  margin:50px;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan>螞蟻部落一</tspan>
    <tspan x="10 40" y="0 20">螞蟻部落二</tspan>
  </text> 
</svg>
</body>
</html>

引數值的數字會依次作用於文字中的字元，如果數字不夠用，後面字元都會緊隨其後，對於y數列也是如此。

二.dx和dy屬性:

x和y規定的是字元的絕對定位，dx和dy規定字元的相對位置。

dx和dy是相對於字元的當前座標，然後進行一個累加，程式碼例項如下:

[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;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan x="10 40" y="0 20" dx="10 20" dy="20 30">螞蟻部落</tspan>
  </text> 
</svg>
</body>
</html>

與x和y屬性相同，引數值是一個數列，下面介紹一下它是工作的:

（1）.如果沒有規定dx和dy屬性，那麼字元的位置是有x和y屬性規定的。

（2）.如果規定了dx或者dy，那麼就會以字元的當前位置座標作為參考，然後進行一個累積。

（3）.以上面程式碼為例子，"螞"字元的最終x座標位置是x（10）+dx（10）=20。

三.設定tspan元素中文字樣式:

這個和css方式非常類似，程式碼是來如下:

[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;
}
tspan {
  font-size:20px;
  fill:red;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100">
    <tspan x="10 40" y="0 20">螞蟻部落</tspan>
  </text> 
</svg>
</body>
</html>

設定文字的顏色，不能夠用color屬性，而是使用fill屬性。

四.旋轉效果:

如果旋轉效果應用於<text>元素，那麼這個效果也會應用於所有內部<tspan>元素。

程式碼例項如下:

[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;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="80" rotate="20">
    <tspan >螞蟻部落一</tspan>
    <tspan x="100" y="150" >螞蟻部落二</tspan>
  </text> 
</svg>
</body>
</html>

其實rotate是將<tspan>元素作為一個字元來處理的，它旋轉的就是內部的字元，而不是當前使用者座標系。

所以如果我們想把<tspan>元素扶正，那麼只需要在<tspan>元素上新增rotate="0"即可，而不是設定rotate="-20"。

相關文章