-moz-context-properties

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

-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 に動作するサンプルがあります。

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
-moz-context-properties
実験的非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 55
補足 無効
完全対応 55
補足 無効
補足 With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
無効 From version 55: this feature is behind the svg.context-properties.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 55
補足 無効
完全対応 55
補足 無効
補足 With the preference set to false, the property still works with SVGs via chrome:// or resource:// URLs
無効 From version 55: this feature is behind the svg.context-properties.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報