このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

lengthAdjust

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

lengthAdjust 属性は、テキストが textLength 属性で定義された長さにどのように引き伸ばされるかを制御します。

この属性は次の SVG 要素で使用できます。

html
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">
    <text x="0" y="20" textLength="300" lengthAdjust="spacing">
      字間のみを使って引き伸ばします。
    </text>
    <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
      時間と字形を使って引き伸ばします。
    </text>
    <text x="0" y="80" textLength="100" lengthAdjust="spacing">
      字間のみを使って縮小します。
    </text>
    <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
      時間と字形を使って縮小します。
    </text>
  </g>
</svg>

使用上のメモ

spacing | spacingAndGlyphs
デフォルト値 spacing
アニメーション Yes

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# TextElementLengthAdjustAttribute

ブラウザーの互換性

svg.elements.text.lengthAdjust

svg.elements.tspan.lengthAdjust