d
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
d は CSS のプロパティで、 SVG の <path> 要素が描画するパスを定義します。存在すれば、要素の d 属性よりも優先されます。
構文
/* 既定 */
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;
値
値は path() 関数に単一の <string> 引数を付けたものか、キーワード none のどちらかです。
none-
パスは描画されません。
path(<string>)-
path()関数に引用符付きのデータ文字列の引数が付きます。データ文字列は SVG パスを定義します。 SVG パスのデータ文字列には、パスコマンドが入り、暗黙でピクセル単位を使用します。からのパスは無効とみなされます。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | <path> element in <svg> |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | <basic-shape> で指定された場合はあり、それ以外の場合はなし |
形式文法
d =
none |
<string>
例
パスデータの指定
この例は 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 |
ブラウザーの互換性
Loading…