非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
-moz-context-properties プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。
ウェブページで (例えば <img> 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は -moz-context-properties プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 context-fill 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。
構文
/* キーワード値 */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /* グローバル値 */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: unset;
値
fill- 画像に設定された
fillの値を埋め込まれた SVG に伝えます。 stroke- 画像に設定された
strokeの値を埋め込まれた SVG に伝えます。 fill-opacity- 画像に設定された
fill-opacityの値を埋め込まれた SVG に伝えます。 stroke-opacity- 画像に設定された
stoke-opacityの値を埋め込まれた SVG に伝えます。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | background-image, border-image, list-style-image などで適用される画像を持つすべての要素。 |
| 継承 | あり |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
形式文法
none | [ fill | fill-opacity | stroke | stroke-opacity ]#
例
SVG 画像への塗りつぶしとストロークの公開
この例では、 <img> 要素を使用して埋め込まれた簡単な SVG を使用します。
以下のように、最初に埋め込み SVG に伝えたい値のプロパティを -moz-context-properties プロパティで埋め込む要素に指定する必要があります。
.img1 {
width: 100px;
height: 100px;
-moz-context-properties: fill, stroke;
fill: lime;
stroke: purple;
}
これを行うと、次のように SVG 画像は fill および stroke の値を使用することができるようになります。
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
<rect width='100%' height='100%' stroke-width='30px'
fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
ここで、画像の src に単純な SVG 画像を含む data URI を設定しました。内部の <rect> は、 <img> 要素の fill および stroke から fill および stroke の値を取り、これらの値の context-fill/context-stroke キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。
注: Github に動作するサンプルがあります。
仕様書
どの標準にも含まれていません。
ブラウザーの互換性
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-moz-context-properties | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
55
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
55
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。