SVG word-spacing属性用法及代码示例

SVG中的word-spacing属性用于指示单词之间的间距。可以通过使用属性的长度值来更改此间距。

如果提到的长度没有单位标识符，浏览器会在当前用户坐标系中将其作为宽度值进行处理，否则，如果使用单位标识符之一提及长度，则浏览器会将其转换为当前的相应值用户坐标系。

注意：此属性可以应用于任何元素，但仅对<altGlyph>，<text>，<textPath>，<tref>和<tspan>元素有效。

用法:

word-spacing ="length"

属性值：该属性接受上述和以下描述的单个值：

length:它是一个数字，指定单词之间的间隔。可以跟着长度单位之一，例如px，cm，mm，pt等。

以下示例说明了word-spacing属性的用法：

范例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;  
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <text y="15" word-spacing="10"> 
            GeeksforGeeks is a Computer  
            Science portal 
        </text> 
    </svg> 
</body> 
  
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;  
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="0 0 450 150" 
        xmlns="http://www.w3.org/2000/svg"> 
      
        <text x="0" y="40" word-spacing="-10"> 
            GeeksforGeeks is a Computer  
            Science portal 
        </text> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

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