textLength

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

textLength attribute, available on SVG <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. The 用户代理 will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthAdjust .

By using textLength , you can ensure that your SVG text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet).

You can use this attribute with the following SVG elements:

范例

html, body, svg {
  height: 100%;
}

<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>`
默认值	None
Animatable	Yes

<length-percentage>
<number>

Interactive example

Let's create a simple example that presents text you can resize using an <input> element of type "range" .

CSS

.controls {

font


:

16px

"Open Sans"


,


"Arial"


,

sans-serif

;


}

SVG

Let's start with the SVG. It's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box.

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

First, a <rect> element is used to create and stroke a rectangle to contain the text. Then <text> is used to create the text element itself, with an id of "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> element, of type "range" , is used to create the slider control the user will manipulate to change the width of the text. A <span> element of ID "widthDisplay" is provided to display the current width value.

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() :

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", function(event) {
  textElement.textLength.baseVal.newValueSpecifiedUnits(
      SVGLength.SVG_LENGTHTYPE_PX, widthSlider.valueAsNumber);
  widthDisplay.innerText = widthSlider.value;
}, false);
widthSlider.dispatchEvent(new Event("input"));

After fetching the element references, an EventListener is established by calling addEventListener() on the slider control, to receive any input events which occur. These events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width.

当 "input" event occurs, we call newValueSpecifiedUnits() to set the value of textLength to the slider's new value, using the SVGLength interface's SVG_LENGTHTYPE_PX unit type to indicate that the value represents pixels. Note that we have to dive into textLength to get its baseVal property; textLength is stored as an SVGLength object, so we can't treat it like a plain number.

After updating the text width, the contents of the widthDisplay box are updated with the new value as well, and we're finished.

结果

Here's what the example looks like. Try dragging the slider around to get a feel for what it does.

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'textLength' in that specification.	候选推荐	Allowed percentages and numbers as values.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'textLength' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

另请参阅

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者