files/ja/web/svg/element/switch/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

---
title: <switch>
slug: Web/SVG/Element/switch
tags:
  - Element
  - NeedsExample
  - SVG
  - SVG Container
  - SVG コンテナー
  - 要素
translation_of: Web/SVG/Element/switch
---
<div>{{SVGRef}}</div>

<p><span class="seoSummary"><strong><code>&lt;switch&gt;</code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、その直接の子要素の {{SVGAttr("requiredFeatures")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("systemLanguage")}} 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。</span>他の直接の子要素はバイパスされ、描画されません。子要素が {{SVGElement("g")}} のようなコンテナー要素であった場合、そのサブツリーも処理されたり描画されたりするか、バイパスされたり描画されなかったりします。</p>

<div class="blockIndicator note">
<p><code>display</code> および <code>visibility</code> プロパティは、 <code>&lt;switch&gt;</code> 要素の処理には何の影響もありません。特に、子に <code>display:none</code> を設定しても、 <code>&lt;switch&gt;</code> 処理の真偽テストには影響しません。</p>
</div>

<h2 id="Usage_context" name="Usage_context">使用コンテキスト</h2>

<p>{{svginfo}}</p>

<h2 id="Attributes" name="Attributes">属性</h2>

<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>

<ul>
 <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li>
 <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li>
 <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィックイベント属性</a></li>
 <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2>

<p>この要素は {{domxref("SVGSwitchElement")}} インターフェイスを実装しています。</p>

<h2 id="SVG_switch_example" name="SVG_switch_example">SVG &lt;switch&gt; の例</h2>

<p>この例は、ブラウザーの言語設定に応じて異なるテキストコンテンツを表示する方法を示しています。 <code>switch</code> 要素は、 <code>systemLanguage</code> 属性がユーザーの言語に一致する子要素の最初のものを表示し、どれも一致しない場合は、 <code>systemLanguage</code> 属性を持たないフォールバック要素を表示します。</p>

<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>

<pre class="brush: html">&lt;svg viewBox="0 -20 100 50"&gt;
   &lt;switch&gt;
      &lt;text systemLanguage="ar"&gt;مرحبا&lt;/text&gt;
      &lt;text systemLanguage="de,nl"&gt;Hallo!&lt;/text&gt;
      &lt;text systemLanguage="en-us"&gt;Howdy!&lt;/text&gt;
      &lt;text systemLanguage="en-gb"&gt;Wotcha!&lt;/text&gt;
      &lt;text systemLanguage="en-au"&gt;G'day!&lt;/text&gt;
      &lt;text systemLanguage="en"&gt;Hello!&lt;/text&gt;
      &lt;text systemLanguage="es"&gt;Hola!&lt;/text&gt;
      &lt;text systemLanguage="fr"&gt;Bonjour!&lt;/text&gt;
      &lt;text systemLanguage="ja"&gt;こんにちは&lt;/text&gt;
      &lt;text systemLanguage="ru"&gt;Привет!&lt;/text&gt;
      &lt;text&gt;☺&lt;/text&gt;
   &lt;/switch&gt;
&lt;/svg&gt;</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{ EmbedLiveSample('SVG_switch_example') }}</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'struct.html#SwitchElement', '&lt;switch&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td>{{SVGAttr("systemLanguage")}} 属性の評価を明確にしました。</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'struct.html#SwitchElement', '&lt;switch&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<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("svg.elements.switch")}}</p>