当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。