From 3127e98f19cc22ad4f7ec80ba16a5fbe378f77fd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 26 May 2021 23:18:07 +0900 Subject: Web/SVG/Tutorial/Gradients を更新 (#862) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/SVG/Tutorial/Gradients を更新 - 2021/02/20 時点の英語版を反映 - 原語併記マクロを削除 * Delete svg_radial_gradient_example.png * Delete image files --- files/ja/web/svg/tutorial/gradients/index.html | 139 ++++++++++++++----------- 1 file changed, 76 insertions(+), 63 deletions(-) (limited to 'files/ja/web/svg/tutorial/gradients') diff --git a/files/ja/web/svg/tutorial/gradients/index.html b/files/ja/web/svg/tutorial/gradients/index.html index a161df6e71..819c4c87ef 100644 --- a/files/ja/web/svg/tutorial/gradients/index.html +++ b/files/ja/web/svg/tutorial/gradients/index.html @@ -1,26 +1,25 @@ --- -title: SVGにおける階調度 +title: SVG におけるグラデーション slug: Web/SVG/Tutorial/Gradients tags: + - Intermediate - SVG - 'SVG:Tutorial' translation_of: Web/SVG/Tutorial/Gradients --- -

{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

+

{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

-

恐らく，単なる塗り潰しや枠線より刺激的であるのは，塗り潰しや枠線と同様に階調度 (gradients)もまた作成・適用できるという事実でしょう。

+

単なる塗り潰しや線だけではなく、グラデーション (gradients) も塗り潰しや線として作成・適用できるのが魅力です。

-

階調度の種別には線状・放射状の二つがあります。当該階調度にはid属性を与えなければならず，さもなくばファイル内部の他要素が参照できません。階調度は，再利用性を高める為に，〔オブジェクトの〕形状それ自身とは対照的に，defsセクションにおいて定義します。

+

グラデーションには、線形と放射状の 2 種類があります。グラデーションには id 属性を与えなければならず、そうしないとファイル内の他の要素から参照できません。グラデーションは、再利用性を高めるために、シェイプそのものではなく、 defs セクションで定義されます。

-

線状階調度

+

線形グラデーション

-

線状階調度 (linear gradients)は真っ直ぐな線に沿って〔色が〕変化します。挿入するには，{{SVGElement('linearGradient')}}ノードをSVGファイルの定義セクションの内部に作成します。

+

線形グラデーション (linear gradients) は直線に沿って色が変化します。挿入するには、 {{SVGElement('linearGradient')}} ノードを SVG ファイルの定義セクションの内部に作成します。

-

基本例

+

基本的な例

-
<?xml version="1.0" standalone="no"?>
-
-<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
       <linearGradient id="Gradient1">
         <stop class="stop1" offset="0%"/>
@@ -43,72 +42,67 @@ translation_of: Web/SVG/Tutorial/Gradients
   <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
   <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
 
-</svg>
-

+</svg>

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

-

上記は<rect>要素に線状階調度を適用する例です。線状階調度の内部には複数の{{SVGElement('stop')}}ノードがあります。これらのノードは，階調度の或る位置における色を，位置についてはoffset属性，〔色については〕stop-color属性を指定することで定めます。直接又はCSSを通して割り当てられます。本例示用に，二つの手法を混合しています。具体的には，これは階調度に対して赤色から開始し，中間で透過黒色に変化し，そして青色で終了するよう指示しています。必要なだけの美醜たる混合〔色〕を作成する為に，好きなだけ停止色 (stop color)を挿入できますが，相対位置 (offset)は常に0%（又はパーセント記号を省きたいなら0）から100%（又は1）に増加するべきです。値が重複した場合，当該XML木の最遠下で割り当てられた<stop>要素が用いられます。又，塗り潰し及び枠線と同様に，その場所の透明度を設定するのにstop-opacity属性を指定できます（この場合でも，FF3においてはRGBA値をこの目的に用いることができます）。

+

上記の例では、 <rect> 要素に線形グラデーションを適用します。線形グラデーションの内部には複数の {{SVGElement('stop')}} ノードがあります。これらのノードは、グラデーションのある位置における色を、位置については offset 属性、色については stop-color 属性で指定します。この属性は、直接指定することも、 CSS で指定することもできます。この例では、二つの方法を混在させています。具体的には、グラデーションに対して赤色から開始し、中間で透明な黒に変化し、そして青色で終了するよう指示しています。必要に応じて美しくも醜くもある混色を作ることができますが、オフセットは常に 0% (または % 記号を削除したい場合は 0) から 100% (または 1) まで増加させる必要があります。重複した値は、 XML ツリーの一番下に割り当てられている経由点を使用します。また、 fill や stroke と同様に、 stop-opacity 属性を指定することで、その位置での不透明度を設定することができます (FF3 では、 rgba 値を使って行うこともできます)。

-
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
 

 
-
階調度を用いるには，対象のfill又はstroke属性からそれを参照せねばなりません。これは，urlを用いてCSS中の要素を参照する遣り方と同じことをしています。この場合，当URLは，独特な識別子である「Gradient」を与えた階調度への単なる参照です。適用するには，fillをurl(#Gradient)に設定して，ジャジャーン！ strokeについても同じことができます。

+
グラデーションを使用するには、オブジェクトの fill または stroke 属性から参照する必要があります。これは、 CSS で要素を参照するのと同様に、 url を使って行います。今回の場合は、 url はグラデーションへの参照であり、クリエイティブ ID として "Gradient" を与えました。これをアタッチするには、 fill を url(#Gradient) に設定してください。これでオブジェクトが多色になりました。 stroke でも同じことができます。

 
-
<linearGradient>要素はまた，階調度の大きさ及び見栄えを指定するような他の属性を幾つか持っています。x1，x2，y1，及びy2属性で指定された二点で階調度の方向を制御します。これらの属性は階調度が進み沿う直線を定めます。階調度は水平方向に既定されていますが，これらの属性を変えることで回転させられます。上例におけるGradient2は垂直の階調度を作成するよう設計されています。

+
<linearGradient> 要素は、他にもいくつかの属性を持ち、グラデーションの大きさや外観を指定します。グラデーションの方向は、 x1, x2, y1, y2 という属性で指定された 2 つの点によって制御されます。これらの属性は、グラデーションが移動する線を定義します。グラデーションのデフォルトは水平方向ですが、これらを変更することで回転させることができます。上の例の Gradient2 は、垂直方向のグラデーションを作成するように設計されています。

 
-
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
 

 
-

-
注意: 階調度にxlink:href属性を用いることもできます。これを用いた際は，一つの階調度からの〔<linearGradient>要素の〕属性及び色停 (stop)を別の階調度に組み入れられます。上例においては，Gradient2において全ての色停を再作成しなくてもよくなります。

+
注: グラデーションに xlink:href 属性を用いることもできます。これを使用すると、あるグラデーションの属性や経由点を別のグラデーションに含めることができます。上記の例では、 Gradient2 のすべての経由点を再作成する必要はありません。
 
-
 <linearGradient id="Gradient1">
+
 <linearGradient id="Gradient1">
    <stop id="stop1" offset="0%"/>
    <stop id="stop2" offset="50%"/>
    <stop id="stop3" offset="100%"/>
  </linearGradient>
  <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
-    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
 

+ここでは xlink 名前空間を、通常は文書の先頭にて定義するものですが、このノードで直接定義しました。詳細は画像について説明する際に述べます。

 
-
ここではxlink名前空間を，通常は文書の先頭にて定義するにも拘らず，当該ノード上で直接定義しました。詳細は画像について説明する際に述べます。

-

-
-
放射状階調度

-
-
放射状のグラデーションは直線上のグラデーションに似ていますが、ある点から放射状にグラデーションを描画します。これを作成するには <radialGradient> 要素をドキュメントの定義セクションに追加します。

+
放射状グラデーション

 
-

+
放射状グラデーションは線形グラデーションに似ていますが、ある点から放射状にグラデーションを描画します。これを作成するには {{SVGElement('radialGradient')}} 要素を文書の定義セクションに追加します。

 
-
<?xml version="1.0" standalone="no"?>
+
基本的な例

 
-<svg width="120" height="240" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+
<?xml version="1.0" standalone="no"?>
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <defs>
-      <radialGradient id="Gradient1">
+      <radialGradient id="RadialGradient1">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
       </radialGradient>
-      <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25">
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
       </radialGradient>
   </defs>
 
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
 
-</svg>
-

+</svg>

+
+
{{ EmbedLiveSample('Basic_example_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

 
-
ここで用いている stop は前出のものと同じですが、ここではオブジェクトの中心が赤色になり、そこから縁の青色に向けて全方向の色が変化します。直線上のグラデーションと同様に、<radialGradient> ノードも位置や方向を指定する属性を持つことができます。しかし直線上のグラデーションと異なり、これらはやや複雑です。放射状のグラデーションでも 2 つの点が定義され、それらはグラデーションの端がどこかを定義します。1 点目はグラデーションが終わる場所を囲む円を定義します。これは cx および cy 属性で定義する中心と、r 属性で定義する半径が必要です。これら 3 つの属性を設定することで、前出の例の 2 番目の長方形で表したように、グラデーションの中心の移動やサイズの変更ができます。

+
ここで使われている経由点は先ほどと同じですが、今度はオブジェクトの中央が赤になり、すべての方向の端が青になるように徐々に変化します。線形グラデーションと同様に、 <radialGradient> ノードは、その位置と方向を表すいくつかの属性を取ることができます。しかし、線形グラデーションとは異なり、もう少し複雑です。放射状グラデーションも 2 つの点によって定義され、その端がどこにあるかを決定します。 1 つ目の点は、グラデーションが終わる円を定義します。この円には、 cx および cy 属性で指定される中心点と、半径 r が必要です。これら 3 つの属性を設定することで、上の 2 つ目の rect に示すように、グラデーションを移動したり、大きさを変更したりすることができます。

 
-
2 点目は焦点と呼ばれ、 fx および fy 属性で定義します。1 点目がグラデーションの端がどこかを示すのに対して、焦点はグラデーションの中心がどこかを示します。これは例を見るとわかりやすくなります。

+
2 つ目の点は焦点と呼ばれ、 fx および fy 属性で定義します。 1 点目がグラデーションの端がどこかを示すのに対して、焦点はグラデーションの中心がどこかを示します。これは例を見るとわかりやすくなります。

 
-

+
中心と焦点

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 
 <svg width="120" height="120" version="1.1"
   xmlns="http://www.w3.org/2000/svg">
@@ -129,40 +123,59 @@ translation_of: Web/SVG/Tutorial/Gradients
   <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
   <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
 
-</svg>
-

+</svg>

+
+
{{ EmbedLiveSample('Center_and_focal_point','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

 
-
焦点が先に定義した円の外側に移動した場合はグラデーションを正しく描画することができませんので、焦点は円の縁にあるものとみなされるでしょう。また焦点を定義しない場合は、円の中心と同じ場所であるとみなします。

+
焦点が先ほどの円の外側に移動してしまうと、グラデーションが正しく描画されないため、スポットは円の縁の中にあるとみなされます。焦点がまったく与えられていない場合は、中心点と同じ場所にあると仮定されます。

 
-
どちらのグラデーションも、{{ 原語併記("変換", "Transformations") }}などさまざまなことを定義する属性を持ちます。その中で、ここで説明したい属性は spreadMethod です。この属性は、グラデーションが終端に達したにもかかわらずオブジェクトがすべて塗りつぶされていない場合にどうするかを制御します。この属性は "pad"、"reflect"、または "repeat" の 3 種類の値をとることができます。"pad" はこれまで見てきたものです。グラデーションが終端に達すると最後の offset の色を、オブジェクトの残りの部分の塗りつぶしに用います。"reflect" はグラデーションを継続しますが、offset が 100% の色から始まり 0% の色へ戻るように逆向きのグラデーションを行い、その後さらに逆向きのグラデーションを行います。"repeat" もグラデーションを継続しますが、逆向きにグラデーションするのではなく最初の色から再びグラデーションを始めます。

+
線形グラデーションと放射状グラデーションには、他にもいくつかの属性があり、それらが受けるであろう変換を記述します。ここで言及したい唯一の属性は spreadMethod 属性です。この属性は、グラデーションが終了しても、オブジェクトがまだ塗りつぶされていない場合にどうするかを制御します。この属性は、 "pad", "reflect", "repeat" の 3 つの値のいずれかを取ることができます。 "pad" は、これまで見てきたものです。グラデーションが終了すると、最終的なオフセットカラーがオブジェクトの残りの部分を埋めるために使用されます。 "reflect" は、グラデーションを継続させますが、逆に反射させます。 100% のオフセットカラーから始まり、 0% のオフセットに戻り、また上に戻ります。 "Repeat" もグラデーションを継続させますが、逆に進むのではなく、最初にジャンプして再度実行します。

 
-

+
spreadMethod

 
-
<?xml version="1.0" standalone="no"?>
+
<?xml version="1.0" standalone="no"?>
 
 <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
-            spreadMethod="repeat">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-  <rect x="50" y="50" rx="15" ry="15" width="100" height="100"
-       fill="url(#Gradient)"/>
-</svg>
-

+  <defs>
+      <radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+
+</svg>

+
+
{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

 
 
余談ですがどちらのグラデーションも、グラデーションのサイズや方向を示すときに用いる単位系を定義する gradientUnits 属性を持ちます。この属性は userSpaceOnUse または objectBoundingBox という値を用いることができます。objectBoundingBox は既定値であり、これまで見てきたものです。この値はグラデーションをオブジェクトのサイズに調整するものであるため座標を 0 から 1 の間の値で指定する必要があり、その値は自動的に対象のオブジェクトの大きさに合わせて調整されます。userSpaceOnUse は絶対的な単位をとります。従ってオブジェクトがどこにあるかを知る必要があり、またグラデーションを同じ場所に置かなければなりません。前出の radialGradient は以下のように書き換えることができます:

 
 
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
 

 
-
gradientTransform 属性を用いてグラデーションを変換させることもできますが、まだ{{ 原語併記("変換", "Transformations") }}の紹介 を行っていないため、後で説明します。

+
gradientTransform 属性を用いてグラデーションを変換させることもできますが、まだ変換の紹介を行っていないため、後で説明します。

 
 
以上の他に、オブジェクトを包み込むボックスが長方形ではない場合に gradientUnits="objectBoundingBox" で値を扱うときの注意事項がありますが、それらはやや複雑であり、またそれの説明に詳しい方が現れるのを待たなければなりません。

 
-
{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

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

+
{{ PreviousNext("Web/SVG/Tutorial/Fills_and_Strokes", "Web/SVG/Tutorial/Patterns") }}

-- 
cgit v1.2.3-54-g00ecf