overflow

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月⁩.

overflow 属性は、要素のコンテンツがブロック整形コンテキストに収まりきらない場合に、どうするかを設定します。この機能は、まだ広く実装されていません。

この属性は、CSS の overflow プロパティと同じ引数の値と意味を持ちますが、以下の追加の点が適用されます。

値が visible であった場合、この属性は効果がありません（すなわち、切り取り矩形は作成されません）。
overflow プロパティが hidden または scroll の値である場合、SVG ビューポートの正確なサイズでの切り取りが適用されます。
scroll が <svg> 要素で指定された場合、コンテンツが切り取られるかどうかにかかわらず、スクロールバーまたはパンナーが SVG ビューポートに表示されます。
SVG コンテンツ内では、auto の値は子要素のすべての描画されたコンテンツが、スクロール機構を用いるか、切り取りなしか、どちらかの形で表示されることを示します。

メモ: overflow の初期値は auto ですが、スタンドアロン文書のルート要素でない場合、 <svg> 要素のユーザーエージェントスタイルシートで上書きされるため、<pattern> 要素、および <marker> 要素は既定では非表示となります。

メモ: プレゼンテーション属性であるため、 overflow には対応する CSS プロパティ overflow があります。両方が指定された場合、 CSS プロパティの方が優先されます。

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

例

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

html

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">
    このテキストは SVG よりも幅が広いので、スクロールバーを表示させる必要があります。
  </text>
</svg>