textlength（文本长度）

该textLength属性在SVG <text>和<tspan>元素上可用，可以指定文本将如何绘制的空间宽度。所述用户代理将确保文本不延伸远于该距离，使用由规定的方法或方法lengthAdjust的属性。默认情况下，只调整字符之间的间距，但如果更改，也可以调整字形大小lengthAdjust。

通过使用textLength，可以确保您的SVG文本以相同的宽度显示，无论条件包括Web字体未能加载（或尚未加载）。

用法说明

分类	没有
值	<长度>
动画	是
规范性文件	SVG 1.1（第二版）

值

值textLength是一个CSS <length>，它指定文本将被调整占据的空间的宽度。

例子

让我们来创建一个简单的例子，展示可以使用<input>类型元素调整大小的文本"range"。

SVG

我们从SVG开始。这是非常基本的，1000×300像素的空间映射到一个10厘米×3厘米的盒子。

<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
 
  <rect x="1" y="1" width="998" height="298"
      fill="none" stroke="green" stroke-width="2" />
 
  <text id="hello" x="10" y="150"
      font-family="sans-serif" font-size="60" fill="green">
    Hello world!
  </text>
</svg

首先，使用一个<rect>元素来创建和描边一个矩形来包含文本。然后<text>用于创建文本元素本身具有id的"hello"。

HTML

The HTML is also simple, with only two displayed elements contained inside a grouping <div>:

<div class="controls">
  <input type="range" id="widthSlider" min="80" max="978">
  <span id="widthDisplay"></span>
</div>

<input>类型的元素"range"用于创建用户将要操纵的滑块控件，以更改文本的宽度。提供一个<span>ID元素"widthDisplay"来显示当前的宽度值。

JavaScript

Finally, let's have a look at the JavaScript code. It starts by stashing references to the elements it will need to access, using Document.getElementById():

let widthSlider = document.getElementById("widthSlider");
let widthDisplay = document.getElementById("widthDisplay");
let textElement = document.getElementById("hello");

widthSlider.addEventListener("input", function(event) {
  textElement.textLength.baseVal.newValueSpecifiedUnits(
      SVGLength.SVG_LENGTHTYPE_PX, widthSlider.valueAsNumber);
  widthDislay.innerText = widthSlider.value;
}, false);

获取元素引用后，EventListener通过调用addEventListener()滑块控件建立一个接收input发生的事件。这些事件会在滑块的值发生变化时发送，即使用户还没有停止移动它，所以我们可以响应地调整文本的宽度。

当一个"input"事件发生时，我们调用SVGLength.newValueSpecifiedUnits()设置值为textLength滑块的新值，使用SVGLength接口的SVG_LENGTHTYPE_PX单位类型来表示该值代表像素。请注意，我们必须深入textLength了解其baseVal财产; textLength被存储为一个SVGLength对象，所以我们不能像一个普通的数字那样对待它。

更新文本宽度后，widthDisplay框中的内容也会更新为新的值，然后我们就完成了。

结果

这是这个例子的样子。尝试拖动滑块来感受它的作用。

元素

以下元素可以使用该textLength属性：

<text>

<tspan>

规范

Specification	Status	Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'textLength' in that specification.	Living Standard

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	(Yes)	(Yes)	11	(Yes)	(Yes)

Feature	Android Webview	Chrome	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	No support	(Yes)	(Yes)

用法说明

值

例子

SVG

HTML

JavaScript

结果

元素

规范

浏览器兼容性

See also