textLength

textLength 属性可用于 SVG <text> 和 <tspan> 元素，允许您指定文本绘制的空间宽度。 用户代理 将确保文本不超出该距离，使用 lengthAdjust 属性指定的方法。默认情况下，仅调整字符之间的间距，但如果更改 lengthAdjust，也可以调整字形大小。

通过使用 textLength，您可以确保您的 SVG 文本在任何情况下（包括 Web 字体加载失败或尚未加载）都以相同的宽度显示。

您可以将此属性与以下 SVG 元素一起使用

示例

html
<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <text y="20" textLength="6em">Small text length</text>
  <text y="40" textLength="120%">Big text length</text>
</svg>

使用说明

值 <length-percentage> | <number>
默认值 无
可动画 是
<length-percentage>

此值指定文本将调整为占据的空间宽度，以绝对长度或百分比表示。

<number>

数值表示当前坐标系单位的长度。

互动示例

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

CSS

css
.controls {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
}

SVG

让我们从 SVG 开始。它非常基础，将 1000x300 像素的空间映射到 10 厘米 x 3 厘米的框中。

html
<svg
  width="10cm"
  height="3cm"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg">
  <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

HTML 也非常简单，只有一个分组 <div> 中包含两个显示元素。

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

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

JavaScript

最后，让我们看看 JavaScript 代码。它首先使用 Document.getElementById() 存储对它需要访问的元素的引用。

js
const widthSlider = document.getElementById("widthSlider");
const widthDisplay = document.getElementById("widthDisplay");
const textElement = document.getElementById("hello");
const baseLength = Math.floor(textElement.textLength.baseVal.value);

widthSlider.value = baseLength;

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

widthSlider.dispatchEvent(new Event("input"));

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

当发生 "input" 事件时，我们调用 newValueSpecifiedUnits() 将 textLength 的值设置为滑块的新值，使用 SVGLength 接口的 SVG_LENGTHTYPE_PX 单位类型来指示该值表示像素。请注意，我们必须深入到 textLength 中才能获取其 baseVal 属性；textLength 存储为 SVGLength 对象，因此我们不能像对待普通数字一样对待它。

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

结果

以下是示例的外观。尝试拖动滑块以了解其功能。

规范

规范
可缩放矢量图形 (SVG) 2
# TextElementTextLengthAttribute

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅