SVG <tspan>用法及代码示例

SVG代表可缩放矢量图形。它可以像HTML画布一样用于制作图形和动画。

SVG <tspan>元素在<text>元素或另一个<tspan>元素内定义子文本。它允许根据用户需要调整该子文本的样式和/或位置。

用法:

<tspan attributes="" >
    Subtext
</tspan>

属性：

x:字形的x轴坐标。
y:字形的y轴坐标。
dx:沿x轴移动。
dy:沿y轴移动。
rotate:字形的旋转。
textlength:呈现文字的长度。
lengthAdjust:调整呈现的长度。

范例1：

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 400 400" 
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            tspan { font:bold; fill:green; } 
        </style> 
  
        <text x="10" y="30" class="small"> 
            <tspan>GeekforGeeks</tspan>:  
       Computer Science Portal for Geeks! 
        </text> 
  
    </svg> 
</body> 
  
</html>

输出：

范例2：淡化矩形的颜色

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 400 400" 
         xmlns="http://www.w3.org/2000/svg"> 
        <style> 
            tspan { fill:green; font:bold 40px sans-serif;} 
        </style> 
  
        <text x="10" y="30" class="small"> 
            This is <tspan>Large</tspan> Text 
        </text> 
  
    </svg> 
</body> 
  
</html>

输出：

支持的浏览器：此SVG元素支持以下浏览器：

谷歌浏览器
IE浏览器
Firefox
苹果Safari
Opera

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 SVG <tspan> element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。