SVG <textPath>文字路徑

admin發表於2018-09-27
SVG

CSS對於文字排列方式的控制能力非常有限，大致僅限於橫平豎直。

如果想要實現文字按照比較複雜的路徑排列，利用CSS難度較高，也許將字元逐個放入span元素，然後利用定位控制span元素可以實現類似效果，可以想象過程一定十分複雜，而利用SVG則要輕鬆的多。

程式碼例項如下：

[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="400" height="200">
  <defs>
    <path id="myTextPath"
      d="M20,20
         L160,20
         L160,160
         L20 160"/>
  </defs>
  
  <path d="M20,20
           L160,20
           L160,160
           L20 160"
        fill="none"
        stroke="red"/>
  
  <text>
    <textPath xlink:href="#myTextPath">
      螞蟻部落歡迎您，本站地址在青島市南區，網址是www.softwhy.com
    </textPath>
  </text>
</svg>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/27/111118baluz2bjiucns0z0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到文字"螞蟻部落歡迎您，本站地址在青島市南區，網址是www.softwhy.com"沿著指定的路徑分佈。

程式碼分析如下：

（1）.利用id屬性值為"myTextPath"的<path>元素繪製一個路徑，此路徑是沒有進行填充，在視覺上不可見。

（2）.使用<text>元素繪製文字，但是文字外面還要巢狀一個<textPath>元素，這就是本文的主角。

（3）.之所以文字要巢狀在<textPath>元素中，因為文字要與路徑發生聯絡，需要通過<textPath>元素。

（4）.通過<textPath>元素的xlink:href屬性引用路徑即可。

（5）.紅色的路徑是為了便於觀察而做的一條輔助線。

[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="400" height="200">
  <defs>
    <path id="myTextPath"
      d="M20,20
         L160,20
         L160,160
         L20 160"/>
  </defs>
  
  <path d="M20,20
           L160,20
           L160,160
           L20 160"
        fill="none"
        stroke="red"/>
  
  <text>
    <textPath xlink:href="#myTextPath" startOffset="50">
      螞蟻部落歡迎您，本站地址在青島市南區，網址是www.softwhy.com
    </textPath>
  </text>
</svg>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201809/27/111155w4frkfz1fhswbbzo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此程式碼與第一段程式碼的唯一區別是為<textPath>元素新增了startOffset屬性。

startOffset是一個合成詞，由單詞start與offset合成，start是開始的意思，offset是偏移量的意思。

由此我們可以猜測此屬性用來規定文字距離路徑起始位置的偏移量，事實也是如此。

相關文章