當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

SVG <textPath>用法及代碼示例


SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。

<textPath> SVG元素用於呈現文本以及特定路徑。

若要將文本與特定路徑一起呈現，請將文本包含在具有href屬性的<textPath>元素中，該元素具有對<path>元素的引用。

用法:

<textPath href="path" >
    Your Text Here
</textPath>

屬性：



  • href：呈現文字的路徑或基本形狀的網址。
  • lengthAdjust：在此處應將長度調整應用於文本。
  • method：沿路徑渲染單個字形的方法。
  • path：應在其上呈現文本的路徑。
  • side：應在路徑的哪一側呈現文本。
  • spacing：字形之間的間距應如何處理。
  • startOffSet：文本的開頭應從路徑的開頭偏移多遠。
  • textLength：文本將在其中呈現的空間的寬度。
  • Global Attributes:一些常用的全局屬性，例如核心屬性和樣式屬性等。

例：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg"> 
        <path id="Geek" fill="yellow" stroke="green"
            d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10, 
               10 10,40 Q10,70 45,70 Q70,70 75,50" /> 
  
        <text> 
            <textPath href="#Geek"> 
                The Geeky Text Along The Path 
            </textPath> 
        </text> 
    </svg> 
</body> 
  
</html>

輸出：

支持的瀏覽器：此SVG元素支持以下瀏覽器：

  • 穀歌瀏覽器
  • IE瀏覽器
  • Firefox
  • 蘋果Safari
  • Opera

相關用法


注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG <textPath> element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。