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 的瀏覽器中載入。

另請參閱