textlength（文本长度）

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

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

用法说明

值

值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>

规范

浏览器兼容性

See also

• SVG Tutorial: Texts

• SVGAnimatedLength and SVGLength

• <text>

Edit this page on MDN

 © 2005–2017 Mozilla Developer Network and individual contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/textLength