From fc7ab83316543792d736acced29ca77c236ab824 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 10 Jun 2021 00:13:26 +0900 Subject: Web/SVG/Tutorial/Other_content_in_SVG を更新 (#1036) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版章題マクロを除去 - 2020/12/20 時点の英語版に同期 --- .../svg/tutorial/other_content_in_svg/index.html | 42 +++++++++++++--------- 1 file changed, 26 insertions(+), 16 deletions(-) (limited to 'files/ja/web/svg') diff --git a/files/ja/web/svg/tutorial/other_content_in_svg/index.html b/files/ja/web/svg/tutorial/other_content_in_svg/index.html index 1b1aa2a6a0..7fffed676b 100644 --- a/files/ja/web/svg/tutorial/other_content_in_svg/index.html +++ b/files/ja/web/svg/tutorial/other_content_in_svg/index.html @@ -2,29 +2,39 @@ title: Other content in SVG slug: Web/SVG/Tutorial/Other_content_in_SVG tags: + - Intermediate - SVG - 'SVG:Tutorial' translation_of: Web/SVG/Tutorial/Other_content_in_SVG --- -

{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

+

{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

+

長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。

-

{{ 英語版章題("Embedding raster images") }}

-

ラスターイメージの埋め込み

-

HTML における img 要素と同様に、SVG には同じ用途の image 要素があります。これを用いて、任意のラスター (およびベクター) イメージを埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。

-

埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることが出ます:

-
<svg version="1.1"
+
+
ラスター画像の埋め込み

+
+
HTML における img 要素と同様に、SVG には同じ用途の image 要素があります。これを用いて、任意のラスター (およびベクター) 画像を埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。

+
+
埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることができます。

+
+
<svg version="1.1"
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200" height="200">
-  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
-     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>
 </svg>
 

-
imagedemo.png

-
{{ 英語版章題("Embedding arbitrary XML") }}

-
任意の XML の埋め込み

-
SVG は XML アプリケーションであることから、常に SVG ドキュメント内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に {{ SVGElement("foreignObject") }} 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する width および height です) のキャリアになることです。

+
+
{{ EmbedLiveSample('Embedding_raster_images','220','220','/files/16567/rotate-image-demo.png') }}

+
+
任意の XML の埋め込み

+
+
SVG は XML アプリケーションであることから、常に SVG 文書内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアーでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に {{ SVGElement("foreignObject") }} 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナーおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する width および height です) のキャリアーになることです。

+
 
foreignObject 要素は、SVG に XHTML を埋め込むのによい手段です。長いテキストがある場合、SVG の text 要素より HTML のレイアウトの方がより適切かつ使いやすくなります。他によく挙げられる使い方として、MathML の式の埋め込みがあります。これは SVG を科学分野で応用する場合に、SVG と MathML を統合するためにとてもよい方法です。

-
注意: foreignObject の内容物は、ビューアによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。

-
foreignObject は SVG の要素ですので、image と同様に SVG のあらゆる技術を用いることができ、そしてそれは foreignObject の内容物に適用されます。

-
{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

-
{{ languages( { "en": "en/SVG/Tutorial/Other_content_in_SVG"} ) }}

+
+
注意: foreignObject の内容物は、ビューアーによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。

+
+
foreignObject は SVG の要素ですので、image と同様に SVG のあらゆる技術を用いることができ、その内容物に適用されます。

+
+
{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}

-- 
cgit v1.2.3-54-g00ecf