使用textLength属性可以枚举文本占用的空间的宽度。通过使用textLength,您的SVG文本将以相同的宽度显示。使用此属性的元素包括:<文本>,<文本路径>,<tref>和<tspan>。
用法:
textLength = length-percentage | number;
属性值:transform属性接受上述和以下所述的值:
- length-percentage:它枚举了文本占用绝对长度或百分比的空间宽度。
- number:它是一个数值,表示当前坐标系的单位。
以下示例说明了textLength属性的用法
范例1:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green; font-size:50px;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 300 160"
xmlns="http://www.w3.org/2000/svg">
<text y="15" textLength="10em">
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 300 160"
xmlns="http://www.w3.org/2000/svg">
<text y="20" textLength="100%">
A Computer Science portal.
</text>
</svg>
</body>
</html>
输出:
相关用法
- SVG viewBox属性用法及代码示例
- SVG rx属性用法及代码示例
- SVG width属性用法及代码示例
- SVG opacity属性用法及代码示例
- SVG stroke-width属性用法及代码示例
- SVG stroke属性用法及代码示例
- SVG height属性用法及代码示例
- SVG ry属性用法及代码示例
- SVG fill属性用法及代码示例
- SVG font-size属性用法及代码示例
- SVG stroke-dasharray属性用法及代码示例
- SVG cx属性用法及代码示例
- SVG flood-opacity属性用法及代码示例
- SVG filter属性用法及代码示例
- SVG font-style属性用法及代码示例
- SVG flood-color属性用法及代码示例
- SVG fill-opacity属性用法及代码示例
注:本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG textLength Attribute。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。