CSS marker-end 属性
- 前のページ marker
- 次のページ marker-mid
定義と用法
marker-end
属性は、要素のパスの最後の頂点に描かれるマーカーを指します。
マーカーの形状は、SVG <marker> 元素で定義され、url() 値を参照します。
CSS marker-end
属性の値は、SVG 内の marker-end 属性の値を覆します。
インスタンス
例 1
マーカー(矢印)を指し、それが要素のパスの最後の頂点に描かれます:
#test { marker-end: url(#arrow); }
例 2
マーカー(円)を指し、それが要素のパスの最後の頂点に描かれます:
#test { marker-end: url(#circle); }
CSS 文法
marker-end: none;url|initial|inherit;
属性値
値 | 説明 |
---|---|
none | デフォルト値。パスの最後の頂点にはマーカーが描かれません。 |
url | SVG <marker> 元素で定義されたマーカーの URL を参照します。 |
initial | この属性をデフォルト値に設定します。参照 initial。 |
inherit | 親要素からこの属性を継承します。参照 inherit。 |
ブラウザのサポート
テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
80 | 80 | 72 | 13.1 | 67 |
関連ページ
チュートリアル:SVG マーク
- 前のページ marker
- 次のページ marker-mid