files/ja/web/css/-moz-context-properties/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

---
title: '-moz-context-properties'
slug: Web/CSS/-moz-context-properties
tags:
  - '-moz-context-properties'
  - CSS
  - CSS Property
  - 'CSS:Mozilla Extensions'
  - Experimental
  - Needs Privileges
  - Non-standard
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/-moz-context-properties
---
<div>{{CSSRef}}{{Non-standard_header}}</div>

<p><span class="seoSummary"><code><strong>-moz-context-properties</strong></code> プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。</span></p>

<p>ウェブページで (例えば {{htmlelement("img")}} 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は <code>-moz-context-properties</code> プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 <code>context-fill</code> 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css notranslate">/* キーワード値 */
-moz-context-properties: fill;
-moz-context-properties: fill, stroke;

/* グローバル値 */
-moz-context-properties: inherit;
-moz-context-properties: initial;
-moz-context-properties: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt><code>fill</code></dt>
 <dd>画像に設定された <code>fill</code> の値を埋め込まれた SVG に伝えます。</dd>
 <dt><code>stroke</code></dt>
 <dd>画像に設定された <code>stroke</code> の値を埋め込まれた SVG に伝えます。</dd>
 <dt><code>fill-opacity</code></dt>
 <dd>画像に設定された <code>fill-opacity</code> の値を埋め込まれた SVG に伝えます。</dd>
 <dt><code>stroke-opacity</code></dt>
 <dd>画像に設定された <code>stoke-opacity</code> の値を埋め込まれた SVG に伝えます。</dd>
</dl>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{CSSInfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Exposing_fill_and_stroke_to_an_SVG_image" name="Exposing_fill_and_stroke_to_an_SVG_image">SVG 画像への塗りつぶしとストロークの公開</h3>

<p>この例では、 <code>&lt;img&gt;</code> 要素を使用して埋め込まれた簡単な SVG を使用します。</p>

<p>以下のように、最初に埋め込み SVG に伝えたい値のプロパティを <code>-moz-context-properties</code> プロパティで埋め込む要素に指定する必要があります。</p>

<pre class="brush: css notranslate">.img1 {
  width: 100px;
  height: 100px;
  -moz-context-properties: fill, stroke;
  fill: lime;
  stroke: purple;
}</pre>

<p>これを行うと、次のように SVG 画像は {{cssxref("fill")}} および {{cssxref("stroke")}} の値を使用することができるようになります。</p>

<pre class="brush: html notranslate">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
                       &lt;rect width='100%' height='100%' stroke-width='30px'
                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>

<p>ここで、画像の <code>src</code> に単純な SVG 画像を含む data URI を設定しました。内部の <code>&lt;rect&gt;</code> は、 <code>&lt;img&gt;</code> 要素の {{cssxref("fill")}} および {{cssxref("stroke")}} から <code>fill</code> および <code>stroke</code> の値を取り、これらの値の <code>context-fill</code>/<code>context-stroke</code> キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。</p>

<div class="note">
<p><strong>注</strong>: <a href="https://mdn.github.io/css-examples/moz-context-properties/">Github に動作するサンプル</a>があります。</p>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<p>どの標準にも含まれていません。</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.-moz-context-properties")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a></li>
 <li><a href="/ja/docs/Web/Media/images">HTML での画像の使用</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブへのベクターグラフィックの追加</a></li>
 <li><a href="/ja/docs/Web/SVG/SVG_as_an_Image">画像としての SVG</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li>
</ul>