From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/element/switch/index.html | 98 ++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 files/ja/web/svg/element/switch/index.html (limited to 'files/ja/web/svg/element/switch') diff --git a/files/ja/web/svg/element/switch/index.html b/files/ja/web/svg/element/switch/index.html new file mode 100644 index 0000000000..9c0386d930 --- /dev/null +++ b/files/ja/web/svg/element/switch/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/SVG/Element/switch +tags: + - Element + - NeedsExample + - SVG + - SVG Container + - SVG コンテナー + - 要素 +translation_of: Web/SVG/Element/switch +--- +
{{SVGRef}}
+ +

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

+ +
+

display および visibility プロパティは、 <switch> 要素の処理には何の影響もありません。特に、子に display:none を設定しても、 <switch> 処理の真偽テストには影響しません。

+
+ +

使用コンテキスト

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

DOM インターフェイス

+ +

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

+ +

SVG <switch> の例

+ +

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

+ +

HTML コンテンツ

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

結果

+ +

{{ EmbedLiveSample('SVG_switch_example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG2', 'struct.html#SwitchElement', '<switch>')}}{{Spec2('SVG2')}}{{SVGAttr("systemLanguage")}} 属性の評価を明確にしました。
{{SpecName('SVG1.1', 'struct.html#SwitchElement', '<switch>')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.elements.switch")}}

-- cgit v1.2.3-54-g00ecf