1. ウェブ
  2. SVG
  3. リファレンス
  4. 属性
  5. text-decoration

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

View in English Always switch to English

text-decoration

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

text-decoration 属性は、テキストに下線、上線、取り消し線を適用するかどうかを定義します。これは、text-decoration-line および text-decoration-style プロパティの一括指定です。

テキスト装飾の塗りつぶしと線は、そのテキスト装飾が宣言されている箇所におけるテキストの塗りつぶしと線によって指定されます。

テキスト装飾（つまり、塗りつぶしと輪郭線）の描画順序は、テキスト装飾が宣言されている箇所における paint-order 属性の値によって決定されます。

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

この属性は、以下の SVG 要素で使用できます。

例

html
<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" text-decoration="underline">下線を引いたテキスト</text>
  <text x="0" y="40" text-decoration="line-through">取り消し線を引いたテキスト</text>
</svg>

使用上のメモ

値 <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
デフォルト値 それぞれのプロパティを参照
アニメーション 可

値の説明は、CSS の text-decoration プロパティを参照してください。

仕様書

仕様書
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告