d
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
構文
/* 既定 */ d: none; /* 基本的な使用 */ d: path("m 5,5 h 35 L 20,30 z"); d: path("M 0,25 l 50,150 l 200,50 z"); d: path("M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"); /* グローバル値 */ d: inherit; d: initial; d: revert; d: revert-layer; d: unset; 値
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | <path> element in <svg> |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | <basic-shape> で指定された場合はあり、それ以外の場合はなし |
形式文法
例
パスデータの指定
この例は d の基本的な用途を示しており、CSS の d プロパティが d 属性よりもどのように優先されるかを示しています。
HTML
2 つの等しい <path> 要素が SVG にあります。それぞれの d 属性の値は "m 5,5 h 90 v 90 h -90 v -90 z" であり、 90px 角の正方形を生成します。
<svg> <path d="m 5,5 h 90 v 90 h -90 v -90 z" /> <path d="m 5,5 h 90 v 90 h -90 v -90 z" /> </svg> CSS
CSS ではそれぞれのパスに、黒い stroke と半透明の赤の fill を設定します。それから d プロパティを使用して、後者のパスのみ SVG の d 属性を上書きします。ブラウザーは既定で 300px の幅、 150px の高さの SVG 画像を描画します。
svg { border: 1px solid; } path { fill: #f338; stroke: #000; } path:last-of-type { d: path( "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z" ); } 結果
2 つ目の <path> は、 CSS の d プロパティの path() 関数値で定義されたとおり、ハートになります。スタイル設定されていない方の <path> のパスは、 SVG の d 属性値で定義されている通り正方形です。
データパスのアニメーション
この例では、 d 属性値のアニメーションをデモします。
HTML
単一の <path> 要素の入った <svg> を作成します。
<svg> <path /> </svg> CSS
d 属性を使って、斜線を引いたハートを定義します。 CSS を使用して、そのパスの fill、stroke、stroke-width を定義し、 2 秒間の transition を追加します。 :hover スタイルを追加し、少し異なる path() 関数を使用します。パスには、既定の状態と同じ数のデータポイントがあり、パスをアニメーション可能にします。
svg { border: 1px solid; } path { d: path( "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M90,5 L5,90" ); transition: all 2s; fill: none; stroke: red; stroke-width: 3px; } svg:hover path { d: path( "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90" ); stroke: black; } 結果
アニメーションを見るには、 SVG 上にポインターを移動してください。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # TheDProperty |