From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/svg/attribute/accent-height/index.html | 68 +++ .../svg/attribute/alignment-baseline/index.html | 167 +++++ files/ja/web/svg/attribute/cx/index.html | 176 ++++++ files/ja/web/svg/attribute/cy/index.html | 172 ++++++ files/ja/web/svg/attribute/d/index.html | 670 +++++++++++++++++++++ files/ja/web/svg/attribute/dx/index.html | 71 +++ files/ja/web/svg/attribute/end/index.html | 204 +++++++ files/ja/web/svg/attribute/fill-opacity/index.html | 91 +++ files/ja/web/svg/attribute/fill/index.html | 456 ++++++++++++++ files/ja/web/svg/attribute/filterunits/index.html | 50 ++ files/ja/web/svg/attribute/href/index.html | 402 +++++++++++++ files/ja/web/svg/attribute/id/index.html | 101 ++++ files/ja/web/svg/attribute/index.html | 488 +++++++++++++++ files/ja/web/svg/attribute/lengthadjust/index.html | 36 ++ files/ja/web/svg/attribute/marker-mid/index.html | 103 ++++ files/ja/web/svg/attribute/onclick/index.html | 85 +++ files/ja/web/svg/attribute/points/index.html | 141 +++++ files/ja/web/svg/attribute/r/index.html | 124 ++++ files/ja/web/svg/attribute/scale/index.html | 96 +++ .../web/svg/attribute/stroke-dasharray/index.html | 117 ++++ .../web/svg/attribute/stroke-dashoffset/index.html | 114 ++++ .../ja/web/svg/attribute/stroke-linecap/index.html | 73 +++ .../web/svg/attribute/stroke-linejoin/index.html | 86 +++ files/ja/web/svg/attribute/stroke/index.html | 69 +++ files/ja/web/svg/attribute/transform/index.html | 270 +++++++++ files/ja/web/svg/attribute/viewbox/index.html | 55 ++ files/ja/web/svg/attribute/writing-mode/index.html | 85 +++ files/ja/web/svg/attribute/x/index.html | 65 ++ files/ja/web/svg/attribute/x1/index.html | 160 +++++ files/ja/web/svg/attribute/y/index.html | 65 ++ 30 files changed, 4860 insertions(+) create mode 100644 files/ja/web/svg/attribute/accent-height/index.html create mode 100644 files/ja/web/svg/attribute/alignment-baseline/index.html create mode 100644 files/ja/web/svg/attribute/cx/index.html create mode 100644 files/ja/web/svg/attribute/cy/index.html create mode 100644 files/ja/web/svg/attribute/d/index.html create mode 100644 files/ja/web/svg/attribute/dx/index.html create mode 100644 files/ja/web/svg/attribute/end/index.html create mode 100644 files/ja/web/svg/attribute/fill-opacity/index.html create mode 100644 files/ja/web/svg/attribute/fill/index.html create mode 100644 files/ja/web/svg/attribute/filterunits/index.html create mode 100644 files/ja/web/svg/attribute/href/index.html create mode 100644 files/ja/web/svg/attribute/id/index.html create mode 100644 files/ja/web/svg/attribute/index.html create mode 100644 files/ja/web/svg/attribute/lengthadjust/index.html create mode 100644 files/ja/web/svg/attribute/marker-mid/index.html create mode 100644 files/ja/web/svg/attribute/onclick/index.html create mode 100644 files/ja/web/svg/attribute/points/index.html create mode 100644 files/ja/web/svg/attribute/r/index.html create mode 100644 files/ja/web/svg/attribute/scale/index.html create mode 100644 files/ja/web/svg/attribute/stroke-dasharray/index.html create mode 100644 files/ja/web/svg/attribute/stroke-dashoffset/index.html create mode 100644 files/ja/web/svg/attribute/stroke-linecap/index.html create mode 100644 files/ja/web/svg/attribute/stroke-linejoin/index.html create mode 100644 files/ja/web/svg/attribute/stroke/index.html create mode 100644 files/ja/web/svg/attribute/transform/index.html create mode 100644 files/ja/web/svg/attribute/viewbox/index.html create mode 100644 files/ja/web/svg/attribute/writing-mode/index.html create mode 100644 files/ja/web/svg/attribute/x/index.html create mode 100644 files/ja/web/svg/attribute/x1/index.html create mode 100644 files/ja/web/svg/attribute/y/index.html (limited to 'files/ja/web/svg/attribute') diff --git a/files/ja/web/svg/attribute/accent-height/index.html b/files/ja/web/svg/attribute/accent-height/index.html new file mode 100644 index 0000000000..ba8cbf9beb --- /dev/null +++ b/files/ja/web/svg/attribute/accent-height/index.html @@ -0,0 +1,68 @@ +--- +title: accent-height +slug: Web/SVG/Attribute/accent-height +tags: + - Deprecated + - NeedsExample + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/accent-height +--- +
{{SVGRef}}{{deprecated_header}}
+ +

accent-height属性は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。

+ +

1つの要素のみがこの属性を使用します: {{SVGElement("font-face")}}

+ +

font-face

+ +

{{SVGElement("font-face")}}に対して、accent-heightは原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。

+ + + + + + + + + + + + + + + + +
値<number>
既定値Value of {{SVGAttr("ascent")}}
アニメーション可否いいえ
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("SVG1.1", "fonts.html#FontFaceElementAccentHeightAttribute", "accent-height")}}{{Spec2("SVG1.1")}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("svg.elements.font-face.accent-height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/alignment-baseline/index.html b/files/ja/web/svg/attribute/alignment-baseline/index.html new file mode 100644 index 0000000000..ad0ae8f224 --- /dev/null +++ b/files/ja/web/svg/attribute/alignment-baseline/index.html @@ -0,0 +1,167 @@ +--- +title: alignment-baseline +slug: Web/SVG/Attribute/alignment-baseline +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/alignment-baseline +--- +
{{SVGRef}}
+ +

alignment-baseline 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は alignment-baseline プロパティの計算値と同じ名前の値となります。

+ +

注: プレゼンテーション属性として、 alignment-baseline は CSS プロパティとして使用することができます。

+ +

プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは {{SVGElement("tspan")}}, {{SVGElement("tref")}}, {{SVGElement("altGlyph")}}, and {{SVGElement("textPath")}} の4つの属性のみです。

+ +

使用上の注意

+ + + + + + + + + + + + + + + + +
値auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom
既定値auto
アニメーション可
+ +
+
auto {{deprecated_inline}}
+
この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。
+
baseline
+
Uses the {{Glossary("dominant baseline")}} choice of the parent. Matches the box’s corresponding {{Glossary("baseline")}} to that of its parent.
+
before-edge {{deprecated_inline}}
+
The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.
+
text-bottom
+
Matches the bottom of the box to the top of the parent’s content area.
+
text-before-edge
+
+

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

+ +

Note: This keyword may be mapped to text-top.

+
+
middle
+
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
+
central
+
Matches the box’s central baseline to the central baseline of its parent.
+
after-edge {{deprecated_inline}}
+
+

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

+
+
text-top
+
Matches the top of the box to the top of the parent’s content area.
+
text-after-edge
+
+

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

+ +

Note: This keyword may be mapped to text-bottom.

+
+
ideographic
+
Matches the box’s ideographic character face under-side baseline to that of its parent.
+
alphabetic
+
Matches the box’s alphabetic baseline to that of its parent.
+
hanging
+
+

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

+
+
mathematical
+
Matches the box’s mathematical baseline to that of its parent.
+
top
+
+

Aligns the top of the aligned subtree with the top of the line box.

+
+
center
+
Aligns the center of the aligned subtree with the center of the line box.
+
bottom
+
Aligns the bottom of the aligned subtree with the bottom of the line box.
+
+ +

SVG 2 introduces some changes to the definition of this property. In particular: the values auto, before-edge, and after-edge have been removed. For backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to text-bottom. Neither text-before-edge nor text-after-edge should be used with the {{cssxref("vertical-align")}} property.

+ +

例

+ +
<svg width="300" height="120" viewBox="0 0 300 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <!-- Materialisation of anchors -->
+    <path d="M60,10 L60,110
+             M30,10 L300,10
+             M30,65 L300,65
+             M30,110 L300,110
+             " stroke="grey" />
+
+    <!-- Anchors in action -->
+    <text alignment-baseline="hanging"
+          x="60" y="10">A hanging</text>
+
+    <text alignment-baseline="middle"
+          x="60" y="65">A middle</text>
+
+    <text alignment-baseline="baseline"
+          x="60" y="110">A baseline</text>
+
+    <!-- Materialisation of anchors -->
+    <circle cx="60" cy="10" r="3" fill="red" />
+    <circle cx="60" cy="65" r="3" fill="red" />
+    <circle cx="60" cy="110" r="3" fill="red" />
+
+<style><![CDATA[
+text{
+    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+}
+]]></style>
+</svg>
+
+ +

{{EmbedLiveSample("Example")}}

+ +

他の要素 ({{SVGElement("text")}} など) におけるオブジェクトの配置については、 {{SVGAttr("dominant-baseline")}} を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Inline", "#propdef-alignment-baseline", "alignment-baseline")}}{{Spec2("CSS3 Inline")}}変更なし
{{SpecName("SVG2", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}{{Spec2("SVG2")}}CSS Inline Layout および注釈を参照し、 auto, before-edge, after-edge, text-before-edge, text-after-edge へ変更
{{SpecName("SVG1.1", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.attributes.presentation.alignment-baseline")}}

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/cx/index.html b/files/ja/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..0420ae0de1 --- /dev/null +++ b/files/ja/web/svg/attribute/cx/index.html @@ -0,0 +1,176 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +translation_of: Web/SVG/Attribute/cx +--- +
{{SVGRef}}
+ +

cx属性は中心のx-座標を定義します。

+ +

3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cx="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle cx="50" cy="50" r="45"/>
+  <ellipse cx="150" cy="50" rx="45" ry="25" />
+  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

{{EmbedLiveSample('topExample', 100, 100)}}

+
+ +

circle

+ +

{{SVGElement('circle')}}に対して、cxは、図形のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length-percentage")}}
既定値0
アニメーション可否はい
+ +

注:SVG2として開始する場合には、cxはジオメトリプロパティです。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。

+ +

ellipse

+ +

{{SVGElement('ellipse')}}に対して、cxは、図形のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length-percentage")}}
Default value0
Animatableはい
+ +

注:SVG2として開始する場合には、cxはジオメトリプロパティです。これは本属性が楕円へのCSSプロパティとしても利用可能であることを意味します。

+ +

radialGradient

+ +

{{SVGElement('radialGradient')}}に対して、cxは、放射状勾配の終端円のx-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値{{cssxref("length")}}
既定値50%
アニメーション可否はい
+ +

例

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cx="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cx="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("SVG2", "geometry.html#CX", "cx")}}{{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG2")}}SVG2ペイントサーバに対する定義
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<radialGradient>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<ellipse>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}{{Spec2("SVG1.1")}}<circle>に対する初期定義
+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/cy/index.html b/files/ja/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..a5a891aad3 --- /dev/null +++ b/files/ja/web/svg/attribute/cy/index.html @@ -0,0 +1,172 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/cy +--- +
{{SVGRef}}
+ +

cy属性は中心のy-座標を定義します。

+ +

3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient cy="25%" id="myGradient">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle  cy="50"  cx="50" r="45"/>
+  <ellipse cy="150" cx="50" rx="45" ry="25" />
+  <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 300)}}

+
+ +

circle

+ +

{{SVGElement('circle')}}に対して、cyは、図形のy-軸の中心を定義します。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
既定値0
アニメーション可否はい
+ +

注: SVG2として開始する場合には、cyはジオメトリプロパティです。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。

+ +

ellipse

+ +

{{SVGElement('ellipse')}}に対して、cyは図形中心のy-座標を定義します。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
既定値0
アニメーション可否はい
+ +

注: SVG2として開始する場合には、cyはジオメトリプロパティです。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。

+ +

radialGradient

+ +

{{SVGElement('radialGradient')}}に対して、cyは、放射状勾配の終端円のy-座標を定義します。

+ + + + + + + + + + + + + + + + +
値<length>
既定値50%
アニメーション可否はい
+ +

例

+ + + +
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient cy="0" id="myGradient000">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="50%" id="myGradient050">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+
+    <radialGradient cy="100%" id="myGradient100">
+      <stop offset="0%"   stop-color="gold" />
+      <stop offset="50%"  stop-color="green" />
+      <stop offset="100%" stop-color="white" />
+    </radialGradient>
+  </defs>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" />
+  <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" />
+  <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('radialGradient', 150, '100%')}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("SVG2", "geometry.html#CY", "cy")}}{{Spec2("SVG2")}}ジオメトリプロパティとしての定義
{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG2")}}SVG2ペイントサーバに対する定義
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<radialGradient>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<ellipse>に対する初期定義
{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}{{Spec2("SVG1.1")}}<circle>に対する初期定義
diff --git a/files/ja/web/svg/attribute/d/index.html b/files/ja/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..1775825110 --- /dev/null +++ b/files/ja/web/svg/attribute/d/index.html @@ -0,0 +1,670 @@ +--- +title: d +slug: Web/SVG/Attribute/d +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/d +--- +
{{SVGRef}}
+ +

d属性は描かれるパスを定義します。

+ +

パスの定義はパスコマンドのリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。

+ +

３つの要素がこの属性を有します： {{SVGElement("path")}}, {{SVGElement("glyph")}}, {{SVGElement("missing-glyph")}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
+    d="M 10,30
+       A 20,20 0,0,1 50,30
+       A 20,20 0,0,1 90,30
+       Q 90,60 50,90
+       Q 10,60 10,30 z" />
+</svg>
+ +

{{EmbedLiveSample('Example', '100%', 200)}}

+
+ +

path

+ +

{{SVGElement('path')}}要素に対しては、d属性は、描かれるパスを定義するパスコマンドの並びを含む文字列です。

+ + + + + + + + + + + + + + + + +
値<string>
初期値none
アニメーション可否Yes
+ +

glyph

+ +

警告:SVG2において、{{SVGElement('glyph')}}は非推奨であり、用いるべきではありません。

+ +

{{SVGElement('glyph')}}要素に対しては、d属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。

+ + + + + + + + + + + + + + + + +
値<string>
初期値none
アニメーション可否Yes
+ +

注意:原点(座標0,0)は通常、コンテキストの左上の角です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの左下に持ちます。

+ +

missing-glyph

+ +

警告:SVG2において、{{SVGElement('missing-glyph')}}は非推奨であり、用いるべきではありません。

+ +

{{SVGElement('missing-glyph')}}要素に対しては、d属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。

+ + + + + + + + + + + + + + + + +
値<string>
初期値none
アニメーション可否Yes
+ +

パスコマンド

+ +

パスコマンドは、描かれるパスの定義を指定します。各コマンドは、コマンド文字とコマンドパラメータを示す数値で構成されます。

+ +

SVGでは、6つのタイプのパスコマンドを定義しており、全部で20個のコマンドがあります:

+ + + +

ノート:コマンドはケースセンシティブ（大小文字の区別あり）です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。

+ +

コマンドへの引数として負値を指定することは常に可能です:

+ + + +

MoveToパスコマンド

+ +

MoveToでの指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、現在位置 (Po; {xo, yo})の移動です。Po と新しい現在位置 (Pn; {xn, yn})との間には線は描かれません。

+ + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
M(x, y)+ +

現在位置を座標x,yへ移動します。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo(L)コマンドと解釈されます(以下を参照)。

+ +

形式: Pn = {x, y}

+
m(dx, dy)+ +

現在位置を最後に把握されたパス位置からのdxをx軸方向、dyをy軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標でのLineTo(l)コマンドとして解釈されます(以下を参照)。

+ +

形式: Pn = {xo + dx, yo + dy}

+
+ +

例

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
+    d="M 10,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 40,20 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 50,50 h 10
+       m-20,10 h 10
+       m-20,10 h 10
+       m-20,10 h 10" />
+</svg>
+ +

{{EmbedLiveSample('MoveTo_path_commands', '100%', 200)}}

+ +

LineToパスコマンド

+ +

LineToは、現在位置 (Po; {xo, yo})から終端位置 (Pn; {xn, yn})への直線を指定されたパラメータに基づいて描きます。終端位置(Pn)は、次のコマンドでの現在位置 (Po′)となります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
L(x, y)+ +

現在位置からx,yで指定される終端位置へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo (L) コマンドと解釈されます。

+ +

形式: Po′ = Pn = {x, y}

+
l(dx, dy)+ +

現在位置から、現在位置に対するx-軸方向にdx、y-軸方向にdyで表される終端位置への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標でのLineTo (l) コマンドと解釈されます(以下を参照)。

+ +

形式: Po′ = Pn = {xo + dx, yo + dy}

+
Hx+ +

現在位置から、パラメータxと現在位置のy座標で指定される終端座標までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用のLineTo (H)コマンドと解釈されます。

+ +

形式: Po′ = Pn = {x, yo}

+
hdx+ +

現在位置から、現在位置からのx-軸方向へのdxの並進と現在位置のy座標で指定される終端位置までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用のLineTo (h)コマンドと解釈されます。

+ +

形式: Po′ = Pn = {xo + dx, yo}

+
Vy+ +

現在位置から、パラメータyと現在位置のx座標で指定される終端座標までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用のLineTo (V)コマンドと解釈されます。

+ +

形式: Po′ = Pn = {xo, y}

+
vdy+ +

現在位置から、現在位置からのy-軸方向へのdxの並進と現在位置のx座標で指定される終端位置までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用のLineTo (v)コマンドと解釈されます。

+ +

形式: Po′ = Pn = {xo, yo + dy}

+
+ +

例

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 絶対座標でのLineToコマンド -->
+  <path fill="none" stroke="red"
+        d="M 10,10
+           L 90,90
+           V 10
+           H 50" />
+
+  <!-- 相対座標でのLineToコマンド -->
+  <path fill="none" stroke="red"
+        d="M 110,10
+           l 80,80
+           v -80
+           h -40" />
+</svg>
+ +

{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}

+ +

3次ベジエ曲線

+ +

3次ベジエ曲線は4点で定義される滑らかな曲線です:

+ +
+
開始位置 (現在位置)
+
(Po = {xo, yo})
+
終端位置
+
(Pn = {xn, yn})
+
開始制御点
+
(Pcs = {xcs, ycs})
+ (曲線の開始点近くの曲率を制御します)
+
終端制御点
+
(Pce = {xce, yce})
+ (曲線の終端近くの曲率を制御します)
+
+ +

描画後に、終端位置(Pn)は、次のコマンドに対する現在位置 (Po′)となります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
C(x1,y1, x2,y2, x,y)+ +

開始位置から、x,yで指定される終端位置までの3次ベジエ曲線を描きます。開始制御点はx1,y1で指定され、終端制御点はx2,y2で指定されます。後続する任意個の3つ組の座標は、暗黙的な絶対座標での3次ベジエ曲線(C)コマンドへのパラメータと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {x, y} ;
+ Pcs = {x1, y1} ;
+ Pce = {x2, y2}
+
+
c(dx1,dy1, dx2,dy2, dx,dy)+ +

開始位置から、開始位置からのx-軸方向にdx,y-軸方向にdyとした並進となる終端位置までの3次ベジエ曲線を描きます。開始制御点は、開始点 (曲線の開始位置)をx-軸方向にdx1,y-軸方向にdy1と並進した点です。終端制御点は現在位置 (曲線の開始位置)を、x-軸方向にdx2,y-軸方向にdy2と並進した点です。後続する任意個の3つ組の座標は、暗黙的に相対座標での3次ベジエ曲線 (c) コマンドと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {xo + dx, yo + dy} ;
+ Pcs = {xo + dx1, yo + dy1} ;
+ Pce = {xo + dx2, yo + dy2}
+
+
S(x2,y2, x,y)+開始位置から、x,yで指定される終端位置までの滑らかな3次ベジエ曲線を描きます。終端制御点は、x2,y2で指定されます。開始制御点は、直前の曲線コマンドの終端制御点が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、開始制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな3次ベジエ曲線(S)コマンドへのパラメータと解釈されます。
s(dx2,dy2, dx,dy)+開始位置から、現在位置からのx-軸方向へのdx,y-軸方向へのdyへの並進で表される終端位置までの滑らかな3次ベジエ曲線を描きます。終端制御点は、現在位置(曲線の開始点)をx-軸方向へのdx2とy-軸方向へのdy2だけ並進させた点です。開始制御点は、直前の曲線コマンドの終端位置が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、開始制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな3次ベジエ曲線 (s) コマンドと解釈されます。
+ +

例

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- 絶対座標での3次ベジエ曲線 -->
+  <path fill="none" stroke="red"
+        d="M 10,90
+           C 30,90 25,10 50,10
+           S 70,90 90,90" />
+
+  <!-- 相対座標での3次ベジエ曲線 -->
+  <path fill="none" stroke="red"
+        d="M 110,90
+           c 20,0 15,-80 40,-80
+           s 20,80 40,80" />
+
+  <!-- 曲線の頂点と制御点の明示 -->
+  <g id="ControlPoints">
+
+    <!-- 1つ目の3次コマンドへの制御点 -->
+    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
+    <circle cx="30" cy="90" r="1.5"/>
+
+    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
+    <circle cx="25" cy="10" r="1.5"/>
+
+    <!-- 2つめの円滑化制御点 (1つ目は暗黙的) -->
+    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
+    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
+
+    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
+    <circle cx="70" cy="90" r="1.5" />
+
+    <!-- 曲線上の頂点 -->
+    <circle cx="10" cy="90" r="1.5"/>
+    <circle cx="50" cy="10" r="1.5"/>
+    <circle cx="90" cy="90" r="1.5"/>
+  </g>
+  <use xlink:href="#ControlPoints" x="100" />
+</svg>
+ +

{{EmbedLiveSample('Cubic_Bezier_Curve', '100%', 200)}}

+ +

2次ベジエ曲線

+ +

2次ベジエ曲線は3点で定義される滑らかな曲線です:

+ +
+
開始座標(現在位置)
+
Po = {xo, yo}
+
終端座標
+
Pn = {xn, yn}
+
制御点
+
Pc = {xc, yc}
+ (曲率を制御します)
+
+ +

描画後に、終端位置(Pn)は、次のコマンドに対する現在位置(Po′)となります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
Q(x1,y1, x,y)+ +

開始位置からx,yで指定される終端位置までの2次ベジエ曲線を描きます。制御点はx1,y1で指定されます。後続する任意個の座標の組は、暗黙的に絶対座標での4次ベジエ曲線 (Q) コマンドへのパラメータと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {x, y} ;
+ Pc = {x1, y1}
+
+
q(dx1,dy1, dx,dy)+ +

開始位置から、開始位置からのx-軸方向にdx,y-軸方向にdyとした並進となる終端位置までの2次ベジエ曲線を描きます。制御点は、開始点 (曲線の開始位置)をx-軸方向にdx1,y-軸方向にdy1と並進した点です。後続する任意個の座標は、暗黙的に相対座標での2次ベジエ曲線 (q) コマンドへのパラメータと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {xo + dx, yo + dy} ;
+ Pc = {xo + dx1, yo + dy1}
+
+
T(x,y)+ +

開始位置からx,yで指定される終端位置までの滑らかな2次ベジエ曲線を描きます。制御点は、直前の曲線コマンドの終端制御点が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな2次ベジエ曲線(T)コマンドへのパラメータと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {x, y}
+
+
t(dx,dy)+ +

開始位置から、現在位置からのx-軸方向へのdx,y-軸方向へのdyへの並進で表される終端位置までの滑らかな3次ベジエ曲線を描きます。制御点は、直前の曲線コマンドの制御点が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、制御点は曲線の開始位置(現在座標)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな2次ベジエ曲線 (t) コマンドへのパラメータと解釈されます。

+ +
+
形式:
+
Po′ = Pn = {xo + dx, yo + dy}
+
+
+ +

例

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- 暗黙的な繰り返しによる2次ベジエ曲線 -->
+  <path fill="none" stroke="red"
+        d="M 10,50
+           Q 25,25 40,50
+           t 30,0 30,0 30,0 30,0 30,0" />
+
+  <!-- 曲線の頂点と制御点の明示 -->
+  <g>
+    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
+    <circle cx="25" cy="25" r="1.5" />
+
+    <!-- 曲線上の頂点 -->
+    <circle cx="10" cy="50" r="1.5"/>
+    <circle cx="40" cy="50" r="1.5"/>
+
+    <g id="SmoothQuadraticDown">
+      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
+      <circle cx="70" cy="50" r="1.5" />
+    </g>
+
+    <g id="SmoothQuadraticUp">
+      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
+      <circle cx="100" cy="50" r="1.5" />
+    </g>
+
+    <use xlink:href="#SmoothQuadraticDown" x="60" />
+    <use xlink:href="#SmoothQuadraticUp"   x="60" />
+    <use xlink:href="#SmoothQuadraticDown" x="120" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('Quadratic_Bezier_Curve', '100%', 200)}}

+ +

楕円円弧曲線

+ +

楕円円弧曲線は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。

+ + + + + + + + + + + + + + + + + + + +
コマンドパラメータ説明
A(rx ry 角度 大円弧フラグ 掃引フラグ x y)+ +

現在位置からx,y座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

+ +
    +
  • rxとryは楕円の半径です;
    • +
  • 角度はx-軸に対する楕円の角度（度単位）です;
    • +
  • 大円弧フラグと掃引フラグは、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 +
      +
    • 大円弧フラグでは大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
      • +
    • 掃引フラグでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。
      • +
    +
    • +
+ 座標 x,y は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線 (A) コマンドに対するものと解釈されます。
a(rx ry 角度 大円弧フラグflag 掃引フラグ dx dy)+ +

現在位置から、現在位置からのx-軸方向へのdxとy-軸方向へのdyへの並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:

+ +
    +
  • rxとryは楕円の半径です;
    • +
  • 角度はx-軸に対する楕円の角度（度単位）です;
    • +
  • 大円弧フラグと掃引フラグは、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 +
      +
    • 大円弧フラグでは大きい円弧 (1) を描くか、小さい円弧 (0) を描くかを選択し,
      • +
    • 掃引フラグでは時計回りの円弧 (1) を描くか、反時計周りの円弧 (0) を描くかを選択します。
      • +
    +
    • +
+ dxとdyで並進された座標X,Yは、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (a) コマンドに対するものと解釈されます。
+ +

例

+ + + +
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- 円弧への２つのフラグの効果により各円弧が描画される -->
+  <path fill="none" stroke="red"
+        d="M 6,10
+           A 6 4 10 1 0 14,10" />
+
+  <path fill="none" stroke="lime"
+        d="M 6,10
+           A 6 4 10 1 1 14,10" />
+
+  <path fill="none" stroke="purple"
+        d="M 6,10
+           A 6 4 10 0 1 14,10" />
+
+  <path fill="none" stroke="pink"
+        d="M 6,10
+           A 6 4 10 0 0 14,10" />
+</svg>
+ +

{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}

+ +

ClosePath

+ +

ClosePathは、現在位置からパスの開始位置までの直線描画を指定します。

+ + + + + + + + + + + + + + +
コマンドパラメータ説明
Z, zパスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2つの点が異なる座標の場合は、2点間に直線が描かれます。
+ +

ノート:ClosePathによって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです ({{SVGAttr('stroke-linejoin')}} 設定)を参照のこと。 単に同じ座標に配置されるわけではありません。

+ +

例

+ + + +
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
+
+  <!--
+  初期位置と異なる終端位置による
+  パスで描かれる開いた形状
+  -->
+  <path stroke="red"
+        d="M 5,1
+           l -4,8 8,0" />
+
+  <!--
+  初期位置と一致する終端位置による
+  パスで描かれる開いた形状
+  -->
+  <path stroke="red"
+        d="M 15,1
+           l -4,8 8,0 -4,-8" />
+
+  <!--
+  初期位置と異なる終端位置による
+  パスで描かれる閉じた形状
+  -->
+  <path stroke="red"
+        d="M 25,1
+           l -4,8 8,0
+           z" />
+</svg>
+ +

{{EmbedLiveSample('ClosePath', '100%', 200)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("SVG2", "paths.html#DProperty", "d")}}{{Spec2("SVG2")}}<path>の定義
{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}{{Spec2("SVG1.1")}}<glyph>と<missing-glyph>の初期定義
{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}{{Spec2("SVG1.1")}}<path>の初期定義
diff --git a/files/ja/web/svg/attribute/dx/index.html b/files/ja/web/svg/attribute/dx/index.html new file mode 100644 index 0000000000..62f024708d --- /dev/null +++ b/files/ja/web/svg/attribute/dx/index.html @@ -0,0 +1,71 @@ +--- +title: dx +slug: Web/SVG/Attribute/dx +tags: + - NeedsCompatTable + - NeedsExample + - Reference + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/dx +--- +

« SVG Attribute reference home

+ +

dx 属性は、要素またはその中身の位置についての、x 軸に沿ったずれを表します。まさしくずらされるものは、この属性が設定される要素によります。

+ +

{{SVGElement("feOffset")}} 要素の場合は、入力グラフィックをずらす量を表す <number> です。この量は、 {{SVGElement("filter")}} 要素上に {{SVGAttr("primitiveUnits")}} 属性で確立した座標系で表されます。

+ +

{{SVGElement("glyphRef")}} 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <number> です。

+ +

{{SVGElement("text")}} 要素、 {{SVGElement("tspan")}} 要素、 {{SVGElement("tref")}} 要素、{{SVGElement("altGlyph")}} 要素の場合は、<list-of-length> を受け取るせいで、物事が少し複雑になります。

+ +

一つの <length> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <length> だけずらされます。
+
+ カンマまたはスペースで区切られた n 個の <length> のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の {{SVGElement("text")}} 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <length> だけずらされます。
+
+ <length> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。

+ + + +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
Value<number> | <list-of-length>
AnimatableYes
Normative documentSVG 1.1 (2nd Edition): altGlyph element
+ SVG 1.1 (2nd Edition): feOffset element
+ SVG 1.1 (2nd Edition): glyphRef element
+ SVG 1.1 (2nd Edition): text element
+ SVG 1.1 (2nd Edition): tspan element
+ +

Elements

+ +

以下の要素が dx 属性を使えます。

+ + diff --git a/files/ja/web/svg/attribute/end/index.html b/files/ja/web/svg/attribute/end/index.html new file mode 100644 index 0000000000..5decb67192 --- /dev/null +++ b/files/ja/web/svg/attribute/end/index.html @@ -0,0 +1,204 @@ +--- +title: end +slug: Web/SVG/Attribute/end +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/end +--- +
{{SVGRef}}
+ +

end 属性は、アクティブな期間を制限できるアニメーションの終了値を定義します。

+ +

5つの要素がこの属性を使用しています。 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("set")}} です。

+ +

使用上のメモ

+ + + + + + + + + + + + + + + + +
既定値なし
値<end-value-list>
アニメーション不可
+ +

<end-value-list> は値のセミコロン区切りのリストです。それぞれの値は以下のうちの1つです。

+ +
+
<offset-value>
+
この値は時点を表す clock-value を、 SVG 文書の始まり (通常は {{domxref("SVGElement/load_event", "load")}} または {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント) からの相対で定義します。負の数も有効です。
+
<syncbase-value>
+
この値は syncbase と、任意でその syncbase からのオフセットを定義します。要素のアニメーションの終了時刻は、他のアニメーションの開始またはアクティブ状態の終了からの相対で定義します。
+
有効な syncbase-value は、他のアニメーション要素への ID による参照にドット、そして begin または end が続き、参照先のアニメーション要素の開始とアクティブ状態の終了のどちらと同期するかを識別します。 <offset-value> で定義される任意のオフセット値を追加することができます。
+
<event-value>
+
この値はイベントと任意のオフセットで定義し、要素のアニメーションが終了する時刻を特定します。アニメーションの終了時刻は、指定されたイベントが発生した時刻からの相対で定義します。
+
有効な event-value は、要素 ID の後にドットと、その要素の対応しているイベントのうちの一つが続きます。すべての有効なイベントは (すべての要素で対応しているとは限りません) DOM および HTML の仕様書で定義されています。これらは、 {{domxref("Element/focus_event", "focus")}}, {{domxref("Element/blur_event", "blur")}}, {{domxref("Element/focusin_event", "focusin")}}, {{domxref("Element/focusout_event", "focusout")}}, {{domxref("Element/activate_event", "activate")}}, {{domxref("Element/auxclick_event", "auxclick")}}, {{domxref("Element/click_event", "click")}}, {{domxref("Element/dblclick_event", "dblclick")}}, {{domxref("Element/mousedown_event", "mousedown")}}, {{domxref("Element/mouseenter_event", "mouseenter")}}, {{domxref("Element/mouseleave_event", "mouseleave")}}, {{domxref("Element/mousemove_event", "mousemove")}}, {{domxref("Element/mouseout_event", "mouseout")}}, {{domxref("Element/mouseover_event", "mouseover")}}, {{domxref("Element/mouseup_event", "mouseup")}}, {{domxref("Element/wheel_event", "wheel")}}, {{domxref("Element/beforeinput_event", "beforeinput")}}, {{domxref("Element/input_event", "input")}}, {{domxref("Element/keydown_event", "keydown")}}, {{domxref("Element/keyup_event", "keyup")}}, {{domxref("Element/compositionstart_event", "compositionstart")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}, {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("SVGElement/load_event", "load")}}, {{domxref("SVGElement/unload_event", "unload")}}, {{domxref("SVGElement/abort_event", "abort")}}, {{domxref("Element/error_event", "error")}}, {{domxref("Element/select_event", "select")}}, {{domxref("Window/resize_event", "resize")}}, {{domxref("Element/scroll_event", "scroll")}}, {{domxref("SVGAnimationElement/beginEvent_event", "beginEvent")}}, {{domxref("SVGAnimationElement/endEvent_event", "endEvent")}}, {{domxref("SVGAnimationElement/repeatEvent_event", "repeatEvent")}} です。 <offset-value> で定義される任意のオフセット値を追加することができます。
+
<repeat-value>
+
この値は修飾された repeat イベントを定義します。この要素のアニメーション終了時刻は指定された回数の repeat イベントが発生したときからの相対で定義されます。
+
有効な event-value は、要素 ID の後にドットと repeat() 関数に繰り返し回数を指定する整数値を引数として指定したものです。 <offset-value> で定義される任意のオフセット値を追加することができます。
+
<accessKey-value>
+
この値はアニメーションの終了のきっかけとなるアクセスキーを定義します。要素のアニメーションはユーザーが指定されたキーを押したときに終了します。
+
有効な accessKey-value は、 accessKey() 関数に入力される文字を引数として渡したものです。 <offset-value> で定義される任意のオフセット値を追加することができます。
+
<wallclock-sync-value>
+
この値はアニメーションの終了時刻を現実世界の時刻で定義します。
+
有効な wallclock-sync-value は wallclock() 関数に時刻を引数として渡したものです。時刻の構文は ISO 8601 で定義された構文に基づいたものです。
+
indefinite
+
アニメーションの終了は、 {{domxref("SVGAnimationElement.endElement()")}} メソッド呼び出しで指定されます。
+
+ +

例

+ +

オフセットの例

+ +
<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+    <!-- animated rectangles -->
+    <rect x="10" y="35" height="15" width="0">
+        <animate attributeType="XML" attributeName="width" to="100"
+                 begin="0s" end="8s"
+                 fill="freeze" />
+    </rect>
+
+    <rect x="10" y="60" height="15" width="0">
+        <animate attributeType="XML" attributeName="width" to="75"
+                 begin="0s" end="6s"
+                 fill="freeze" />
+    </rect>
+
+    <rect x="10" y="85" height="15" width="0">
+        <animate attributeType="XML" attributeName="width" to="50"
+                 begin="0s" end="4s"
+                 fill="freeze" />
+    </rect>
+
+    <!-- grid -->
+    <text x="10" y="20" text-anchor="middle">0s</text>
+    <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
+    <text x="35" y="20" text-anchor="middle">2s</text>
+    <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
+    <text x="60" y="20" text-anchor="middle">4s</text>
+    <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
+    <text x="85" y="20" text-anchor="middle">6s</text>
+    <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
+    <text x="110" y="20" text-anchor="middle">8s</text>
+    <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+
+    <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+    <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
+</svg>
+
+ +

{{EmbedLiveSample('Offset_example', '100%', 130)}}

+ +

イベントの例

+ +
<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <!-- animated rectangle -->
+    <rect x="10" y="35" height="15" width="0">
+        <animate attributeType="XML" attributeName="width" from="0" to="100"
+                 begin="0s" end="endButton.click" dur="8s"
+                 repeatCount="indefinite" fill="freeze" />
+    </rect>
+
+    <!-- trigger -->
+    <rect id="endButton" style="cursor:pointer;"
+          x="19.5" y="62.5" rx="5" height="25" width="80"
+          fill="#EFEFEF" stroke="black" stroke-width="1" />
+
+    <text x="60" y="80" text-anchor="middle"
+          style="pointer-events:none;">Click me.</text>
+
+    <!-- grid -->
+    <text x="10" y="20" text-anchor="middle">0s</text>
+    <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="35" y="20" text-anchor="middle">2s</text>
+    <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="60" y="20" text-anchor="middle">4s</text>
+    <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="85" y="20" text-anchor="middle">6s</text>
+    <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="110" y="20" text-anchor="middle">8s</text>
+    <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+
+    <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+    <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+</svg>
+
+ +

{{EmbedLiveSample('Event_example', '100%', 130)}}

+ +

アクセスキーの例

+ +
<svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <!-- animated rectangles -->
+    <rect x="10" y="35" height="15" width="0">
+        <animate attributeType="XML" attributeName="width" from="0" to="100"
+                 begin="0s" end="accessKey(e)" dur="8s"
+                 repeatCount="indefinite" fill="freeze" />
+    </rect>
+
+    <!-- trigger -->
+    <text x="60" y="80" text-anchor="middle"
+          style="pointer-events:none;">Hit the "s" key</text>
+
+    <!-- grid -->
+    <text x="10" y="20" text-anchor="middle">0s</text>
+    <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="35" y="20" text-anchor="middle">2s</text>
+    <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="60" y="20" text-anchor="middle">4s</text>
+    <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="85" y="20" text-anchor="middle">6s</text>
+    <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
+    <text x="110" y="20" text-anchor="middle">8s</text>
+    <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+
+    <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
+    <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
+</svg>
+
+ +

{{EmbedLiveSample('Accesskey_example', '100%', 130)}}

+ +

この例は iFrame に埋め込まれています。キーイベントを有効化したい場合は、まずクリックする必要があります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG Animations 2", "#EndAttribute", "end")}}{{Spec2("SVG Animations 2")}}変更なし
{{SpecName("SVG1.1", "animate.html#EndAttribute", "end")}}{{Spec2("SVG1.1")}}初回定義
diff --git a/files/ja/web/svg/attribute/fill-opacity/index.html b/files/ja/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..af7b8ba3ce --- /dev/null +++ b/files/ja/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,91 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/fill-opacity +--- +
{{SVGRef}}
+ +

fill-opacity属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。

+ +

注:プレゼンテーション属性としてのfill-opacityCSSプロパティに適用できます。

+ +

プレゼンテーション属性として、任意の要素に適用可能ですが、次の11個の要素のみで効果があります: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- 既定のfill不透明度: 1 -->
+  <circle cx="50" cy="50" r="40" />
+
+  <!-- 数値で指定するfill不透明度 -->
+  <circle cx="150" cy="50" r="40"
+          fill-opacity="0.7" />
+
+  <!-- 割合で指定するfill不透明度 -->
+  <circle cx="250" cy="50" r="40"
+          fill-opacity="50%" />
+
+  <!-- CSSプロパティで指定するfill不透明度 -->
+  <circle cx="350" cy="50" r="40"
+          style="fill-opacity: .25;" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

使用上の注意

+ + + + + + + + + + + + + + + + +
値[0-1] | <percentage>
規定値1
アニメーション可否はい
+ +

注: SVG2では、fill-opacityへの割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(以下のブラウザ実装状況を参照)。最良の実装としては、不透明度を[0-1]の範囲の値として指定することです。

+ +

ブラウザー実装状況

+ + + +

{{Compat("svg.attributes.presentation.fill-opacity")}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}{{Spec2("SVG2")}}図形とテキスト向けの定義
{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}{{Spec2("SVG1.1")}}図形とテキスト向けの初期定義
diff --git a/files/ja/web/svg/attribute/fill/index.html b/files/ja/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..53e1408b09 --- /dev/null +++ b/files/ja/web/svg/attribute/fill/index.html @@ -0,0 +1,456 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +translation_of: Web/SVG/Attribute/fill +--- +
{{SVGRef}}
+ +

fill 属性には使われ方により2つの意味があります.  1つは図形やテキストに使われた場合で，その要素を塗りつぶす色を意味します．もう1つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．

+ +

呈示属性(presentation attribute)として全ての要素に適用可能ですが，実際に影響があるのは次の11の要素です: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}.

+ +

アニメーションとしては次の5つの要素で使われています: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, and {{SVGElement('set')}}.

+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple color fill -->
+  <circle cx="50" cy="50" r="40" fill="pink" />
+
+
+  <!-- Fill circle with a gradient -->
+  <defs>
+    <radialGradient id="myGradient">
+      <stop offset="0%"   stop-color="pink" />
+      <stop offset="100%" stop-color="black" />
+    </radialGradient>
+  </defs>
+
+  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />
+
+
+  <!--
+  Keeping the final state of an animated circle
+  which is a circle with a radius of 40.
+  -->
+  <circle cx="250" cy="50" r="20">
+    <animate attributeType="XML"
+             attributeName="r"
+             from="0" to="40" dur="5s"
+             fill="freeze" />
+  </circle>
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

altGlyph

+ +

Warning: As of SVG2 {{SVGElement('altGlyph')}} is deprecated and shouldn't be used.

+ +

For {{SVGElement('altGlyph')}}, fill is a presentation attribute that defines the color of the glyph.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

animate

+ +

For {{SVGElement('animate')}}, fill defines the final state of the animation.

+ + + + + + + + + + + + + + + + +
Valuefreeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default valueremove
AnimatableNo
+ +

animateColor

+ +

Warning: As of SVG Animation 2 {{SVGElement('animateColor')}} is deprecated and shouldn't be used. Use {{SVGElement('animate')}} instead.

+ +

For {{SVGElement('animateColor')}}, fill defines the final state of the animation.

+ + + + + + + + + + + + + + + + +
Valuefreeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default valueremove
AnimatableNo
+ +

animateMotion

+ +

For {{SVGElement('animateMotion')}}, fill defines the final state of the animation.

+ + + + + + + + + + + + + + + + +
Valuefreeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default valueremove
AnimatableNo
+ +

animateTransform

+ +

For {{SVGElement('animateTransform')}}, fill defines the final state of the animation.

+ + + + + + + + + + + + + + + + +
Valuefreeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default valueremove
AnimatableNo
+ +

circle

+ +

For {{SVGElement('circle')}}, fill is a presentation attribute that defines the color of the circle.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

ellipse

+ +

For {{SVGElement('ellipse')}}, fill is a presentation attribute that defines the color of the ellipse.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

path

+ +

For {{SVGElement('path')}}, fill is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the {{SVGAttr('fill-rule')}} attribute)

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

polygon

+ +

For {{SVGElement('polygon')}}, fill is a presentation attribute that defines the color of the interior of the shape. (Interior is define by the {{SVGAttr('fill-rule')}} attribute)

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

polyline

+ +

For {{SVGElement('polyline')}}, fill is a presentation attribute that defines tthe color of the interior of the shape. (Interior is define by the {{SVGAttr('fill-rule')}} attribute)

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

rect

+ +

For {{SVGElement('rect')}}, fill is a presentation attribute that defines the color of the rectangle.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

set

+ +

For {{SVGElement('set')}}, fill defines the final state of the animation.

+ + + + + + + + + + + + + + + + +
Valuefreeze (Keep the state of the last animation frame) | remove (Keep the state of the first animation frame)
Default valueremove
AnimatableNo
+ +

text

+ +

For {{SVGElement('text')}}, fill is a presentation attribute that defines what the color of the text.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

textPath

+ +

For {{SVGElement('textPath')}}, fill is a presentation attribute that defines the color of the text.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

tref

+ +

Warning: As of SVG2 {{SVGElement('tref')}} is deprecated and shouldn't be used.

+ +

For {{SVGElement('tref')}}, fill is a presentation attribute that defines the color of the text.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

tspan

+ +

For {{SVGElement('tspan')}}, fill is a presentation attribute that defines the color of the text.

+ + + + + + + + + + + + + + + + +
Value<paint>
Default valueblack
AnimatableYes
+ +

Note: As a presentation attribute fill can be used as a CSS property.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}{{Spec2("SVG Animations 2")}}Definition for animations
{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}{{Spec2("SVG2")}}Definition for shapes and texts.
+ Adds context-fill and context-stroke.
{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}{{Spec2("SVG1.1")}}Initial definition for animations
{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.fill")}}

+ +

Note: For information on using the context-fill (and context-stroke) values from HTML documents, see the documentation for the non-standard {{cssxref("-moz-context-properties")}} property.

diff --git a/files/ja/web/svg/attribute/filterunits/index.html b/files/ja/web/svg/attribute/filterunits/index.html new file mode 100644 index 0000000000..4a38e54e44 --- /dev/null +++ b/files/ja/web/svg/attribute/filterunits/index.html @@ -0,0 +1,50 @@ +--- +title: filterUnits +slug: Web/SVG/Attribute/filterUnits +translation_of: Web/SVG/Attribute/filterUnits +--- +

« SVG Attribute reference home

+ +

filterUnits属性は、 {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} そして {{ SVGAttr("height") }} の座標系を定義します。

+ +

もしfilterUnits属性が指定されていない場合、objectBoundingBoxが指定されているのと同じになります。

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
ValueuserSpaceOnUse | objectBoundingBox
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+ +
+
userSpaceOnUse
+
{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("filter") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("filter") }} element via a {{ SVGAttr("filter") }} attribute).
+
objectBoundingBox
+
In that case, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent fractions or percentages of the bounding box on the referencing element.
+
+ +

Examples

+ +

Elements

+ +

The following elements can use the filterUnits attribute:

+ + diff --git a/files/ja/web/svg/attribute/href/index.html b/files/ja/web/svg/attribute/href/index.html new file mode 100644 index 0000000000..23dc210b4b --- /dev/null +++ b/files/ja/web/svg/attribute/href/index.html @@ -0,0 +1,402 @@ +--- +title: class +slug: Web/SVG/Attribute/href +translation_of: Web/SVG/Attribute/href +--- +
{{SVGRef}}
+ +

The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.

+ +
+

Note: Specifications before SVG 2 defined an {{SVGAttr("xlink:href")}} attribute, which is now rendered obsolete by the href attribute.

+
+ +

Fifteen elements are using this attribute: {{SVGElement("a")}}, {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("feImage")}}, {{SVGElement("image")}}, {{SVGElement("linearGradient")}}, {{SVGElement("mpath")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("set")}}, {{SVGElement("textPath")}}, and {{SVGElement("use")}}

+ +
+ + +
<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
+  <a href="https://developer.mozilla.org/"><text x="10" y="25">MDN Web Docs</text></a>
+</svg>
+ +

{{EmbedLiveSample("topExample", "320", "100")}}

+
+ +

In SVG

+ +

a

+ +

For {{SVGElement("a")}}, href defines the location of the referenced object, expressed as a URL reference.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

animate, animateMotion, animateTransform, set

+ +

For the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}, href defines a URL referring to the element which is the target of this animation element and which therefore will be modified over time.

+ +

The URL must point to exactly one target element which is capable of being the target of the given animation element. If the URL points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current document, then the animation element will not affect any target element. However, the animation element will still operate normally with regard to its timing properties. Specifically, TimeEvents are dispatched and the animation element can be used as syncbase in an identical fashion to when the URL refers to a valid target element.

+ +

If the href attribute or the deprecated {{SVGAttr("xlink:href")}} attribute is not provided, then the target element will be the immediate parent element of the current animation element. If both xlink:href and href are specified, the value of the latter attribute is used.

+ +

Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.

+ +

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the {{Glossary("SMIL")}} Animation specification. In particular, see SMIL Animation: Specifying the animation target.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableNo
+ +

discard

+ +

For {{SVGElement("discard")}}, href defines a URL referring the target element to discard. See the definition of href on animation elements for details on identifying a target element.

+ +
+

Note: Unlike other animation elements, the <discard> element does not support the deprecated {{SVGAttr("xlink:href")}} attribute.

+
+ +

Note that if the target element is not part of the current SVG document fragment, then whether the target element will be removed or not is defined by the host language.

+ +

If the href attribute is not provided, then the target element will be the immediate parent element of the <discard> element.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableNo
+ +

feImage

+ +

For {{SVGElement("feImage")}}, href defines a URL referring to an image resource or to an element. If both, the {{SVGAttr("xlink:href")}} and the href attribute are specified, the latter overrides the former.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

image

+ +

For {{SVGElement("image")}}, href defines a URL referring to the image to render.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

Example

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/>
+</svg>
+ +

{{EmbedLiveSample("imageExample", 200, 250)}}

+
+ +

linearGradient

+ +

For {{SVGElement("linearGradient")}}, href defines URL referring to a template gradient element; to be valid, the reference must be to a different <linearGradient> or {{SVGElement("radialGradient")}} element.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

mpath

+ +

For {{SVGElement("mpath")}}, href defines a URL referring to the {{SVGElement("path")}} element or basic shape which defines the motion path.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableNo
+ +

pattern

+ +

For {{SVGElement("pattern")}}, href defines a URL referring to a different <pattern> element within the current SVG document. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own href attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own href attribute, then the current element can inherit those attributes or children. On the {{SVGElement("pattern")}} element, the href attribute is animatable.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

radialGradient

+ +

For {{SVGElement("radialGradient")}}, href defines URL referring to a template gradient element; to be valid, the reference must be to a different {{SVGElement("linearGradient")}} or <radialGradient> element.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

script

+ +

For {{SVGElement("script")}}, href defines a URL referring to an external resource containing the script code.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableNo
+ +

textPath

+ +

For {{SVGElement("textPath")}}, href defines a URL referring to the {{SVGElement("path")}} element or basic shape onto which the text will be rendered if no {{SVGAttr("path")}} attribute is provided. On the {{SVGElement("textPath")}} element, the href attribute is animatable.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

use

+ +

For {{SVGElement("use")}}, href defines a URL referring to an element or fragment within an SVG document to be cloned.

+ +

The <use> element can reference an entire SVG document by specifying an href value without a fragment. Such references are taken to be referring to the root element of the referenced document.

+ + + + + + + + + + + + + + + + +
Value<url>
Default valueNone
AnimatableYes
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "linking.html#AElementHrefAttribute", "href for <a>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("a")}} element.
{{SpecName("SVG Animations 2", "#HrefAttribute", "href for <animate>, <animateMotion>, <animateTransform>, and <set>")}}{{Spec2("SVG Animations 2")}}Defines href for animation elements.
{{SpecName("SVG Animations 2", "#DiscardElementHrefAttribute", "href for <discard>")}}{{Spec2("SVG Animations 2")}}Defines href for the {{SVGElement("discard")}} element.
{{SpecName("Filters 1.0", "#element-attrdef-feimage-href", "href for <feImage>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("feImage")}} element.
{{SpecName("SVG2", "embedded.html#ImageElementHrefAttribute", "href for <image>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("image")}} element.
{{SpecName("SVG2", "pservers.html#LinearGradientElementHrefAttribute", "href for <linearGradient>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("linearGradient")}} element.
{{SpecName("SVG Animations 2", "#MPathElementHrefAttribute", "href for <mpath>")}}{{Spec2("SVG Animations 2")}}Defines href for the {{SVGElement("mpath")}} element.
{{SpecName("SVG2", "pservers.html#PatternElementHrefAttribute", "href for <pattern>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("pattern")}} element.
{{SpecName("SVG2", "pservers.html#RadialGradientElementHrefAttribute", "href for <radialGradient>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("radialGradient")}} element.
{{SpecName("SVG2", "interact.html#ScriptElementHrefAttribute", "href for <script>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("script")}} element.
{{SpecName("SVG2", "text.html#TextPathElementHrefAttribute", "href for <textPath>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("textPath")}} element.
{{SpecName("SVG2", "struct.html#UseElementHrefAttribute", "href for <use>")}}{{Spec2("SVG2")}}Defines href for the {{SVGElement("use")}} element.
+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.href")}}

+ +

See also

+ + diff --git a/files/ja/web/svg/attribute/id/index.html b/files/ja/web/svg/attribute/id/index.html new file mode 100644 index 0000000000..e0f12e44b7 --- /dev/null +++ b/files/ja/web/svg/attribute/id/index.html @@ -0,0 +1,101 @@ +--- +title: id +slug: Web/SVG/Attribute/id +tags: + - SVG + - SVG Attribute + - SVG 属性 +translation_of: Web/SVG/Attribute/id +--- +
{{SVGRef}}
+ +

id 属性は要素に固有の名前を割り当てます。

+ +

すべての要素がこの属性を使用します。

+ +
+
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    <![CDATA[
+      #smallRect {
+        stroke: #000066;
+        fill: #00cc00;
+      }
+    ]]>
+  </style>
+
+  <rect id="smallRect" x="10" y="10" width="100" height="100" />
+</svg>
+
+ +

{{EmbedLiveSample("topExample", "120", "120")}}

+
+ +

使用上の注意

+ + + + + + + + + + + + + + + + +
値<id>
既定値None
アニメーションいいえ
+ +
+
<id>
+
+

要素の ID を指定します。 ID はノードツリー内で固有でなければならず、空文字列であってはならず、ホワイトスペース文字を含んではなりません。

+ +
+

注: URL の対象フラグメントとして使用されるときに id の値に SVG view 仕様書として解釈される値 (例えば MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) や、基本メディアフラグメントを使用しないでください。

+
+ +

XML 文書内で妥当でなければなりません。独立した SVG 文書は XML 1.0 の構文を使用しており、有効な ID は指定された文字 (文字、数字、いくつかの句読点) のみを含み、数字、フルストップ (.) 文字、ハイフンマイナス (-) 文字で始まらないことを指定しています。

+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}{{Spec2("SVG2")}}Defines the allowed values in more detail.
{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.attributes.style.class")}}

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/index.html b/files/ja/web/svg/attribute/index.html new file mode 100644 index 0000000000..fd86917249 --- /dev/null +++ b/files/ja/web/svg/attribute/index.html @@ -0,0 +1,488 @@ +--- +title: SVG 属性リファレンス +slug: Web/SVG/Attribute +tags: + - Drawing + - Landing + - Responsive Design + - SVG + - SVG Attribute + - SVG Reference + - SVG リファレンス + - SVG 属性 + - Vector Graphics + - ベクターグラフィックス + - レスポンシブデザイン + - 描画 +translation_of: Web/SVG/Attribute +--- +
{{SVGRef}}
+ +

SVG 要素は、要素の扱いや描画の詳細を指定する属性を使って変更できます。以下は、すべての SVG 属性のリストです。各属性のリンク先のドキュメンテーションでは、どの要素が属性をサポートしているか、どのように動作するかを学ぶことができます。

+ +

SVG 属性 A to Z

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

カテゴリ別の SVG 属性

+ +

ジェネリック属性

+ +

コア属性

+ +

{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}

+ +

スタイル属性

+ +

{{SVGAttr("class")}}, {{SVGAttr("style")}}

+ +

条件処理属性

+ +

{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.

+ + + +

{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}

+ +

プレゼンテーション属性

+ +
すべての SVG プレゼンテーション属性が CSS プロパティとして使用できます。
+ +

{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("transform")}}, {{SVGAttr("transform-origin")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}

+ +

フィルター属性

+ +

フィルタープリミティブ属性

+ +

{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}

+ +

変換関数属性

+ +

{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}

+ +

アニメーション属性

+ +

アニメーション対象要素属性

+ +

{{SVGAttr("href")}}

+ +

アニメーション属性に対する属性

+ +

{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}

+ +

アニメーションタイミング属性

+ +

{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}

+ +

アニメーション値属性

+ +

{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}

+ +

アニメーション付加属性

+ +

{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}

+ +

イベント属性

+ +

アニメーションイベント属性

+ +

onbegin, onend, onrepeat

+ +

文書イベント属性

+ +

onabort, onerror, onresize, onscroll, onunload

+ +

グローバルイベント属性

+ +

oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

+ +

グラフィカルイベント属性

+ +

onactivate, onfocusin, onfocusout

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/lengthadjust/index.html b/files/ja/web/svg/attribute/lengthadjust/index.html new file mode 100644 index 0000000000..217f456402 --- /dev/null +++ b/files/ja/web/svg/attribute/lengthadjust/index.html @@ -0,0 +1,36 @@ +--- +title: lengthAdjust +slug: Web/SVG/Attribute/lengthAdjust +tags: + - NeedsCompatTable + - SVG +translation_of: Web/SVG/Attribute/lengthAdjust +--- +

SVG の <text> 要素または <tspan> 要素が特定の長さを有している場合、それは textLength 属性を使って設定したものである訳ですが、lengthAdjust 属性は、テキストをその長さに引き延ばすかあるいはその長さに圧縮する方法を制御します。

+ +

この属性で可能な二つの値は、 spacing と spacingAndGlyphs です。spacing (デフォルト値) を使うと、文字の形が保たれる一方で、文字同士の間のスペースが伸び縮みします。spacingAndGlyphs を使うと、テキスト要素全体が、そのテキストの方向に沿って引き延ばされます。

+ +

lengthAdjust を用いた SVG テキストの調整

+ +

HTML の内容

+ +
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
+   <g font-face="sans-serif">
+      <text x="0" y="20" textLength="300" lengthAdjust="spacing">
+         Stretched using spacing only.
+      </text>
+      <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
+         Stretched using spacing and glyphs.
+      </text>
+      <text x="0" y="80" textLength="100" lengthAdjust="spacing">
+         Shrunk using spacing only.
+      </text>
+      <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
+         Shrunk using spacing and glyphs.
+      </text>
+   </g>
+</svg>
+ +

結果

+ +

{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}

diff --git a/files/ja/web/svg/attribute/marker-mid/index.html b/files/ja/web/svg/attribute/marker-mid/index.html new file mode 100644 index 0000000000..c1fb340feb --- /dev/null +++ b/files/ja/web/svg/attribute/marker-mid/index.html @@ -0,0 +1,103 @@ +--- +title: marker-mid +slug: Web/SVG/Attribute/marker-mid +tags: + - SVG + - SVG Attribute + - SVG 属性 +translation_of: Web/SVG/Attribute/marker-mid +--- +
{{SVGRef}}
+ +

marker-mid 属性は、指定されたシェイプの中間の頂点すべてに描かれる矢印やマーカーを定義します。

+ +

マーカーは、パスデータの最初と最後以外のすべての頂点に描画されます。

+ +

メモ: プレゼンテーション属性なので、 marker-mid は CSS プロパティとして使用することができます。

+ +

プレゼンテーション属性として任意の要素に適用できますが、 {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}} の7つの要素でのみ効果があります。

+ +
+ + +
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
+        <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/>
+    </marker>
+  </defs>
+  <polyline fill="none" stroke="black"
+      points="20,100 40,60 70,80 100,20" marker-mid="url(#circle)"/>
+</svg>
+
+ +

{{EmbedLiveSample("topExample", "200", "200")}}

+
+ +

使用上のメモ

+ + + + + + + + + + + + + + + + +
既定値none | <marker-ref>
値none
アニメーション可
+ +
+
none
+
指定された頂点にマーカー記号を描画してはならないことを示します。
+
<marker-ref>
+
この値は {{SVGElement("marker")}} 要素への参照で、指定された頂点に描画されるものです。参照が有効でない場合は、マーカーは描画されません。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "painting.html#MarkerEndProperty", "marker-mid")}}{{Spec2("SVG2")}}重要な変更なし
{{SpecName("SVG1.1", "painting.html#MarkerEndProperty", "marker-mid")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.attributes.presentation.marker-mid")}}

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/onclick/index.html b/files/ja/web/svg/attribute/onclick/index.html new file mode 100644 index 0000000000..c1af2fce3c --- /dev/null +++ b/files/ja/web/svg/attribute/onclick/index.html @@ -0,0 +1,85 @@ +--- +title: onclick +slug: Web/SVG/Attribute/onclick +tags: + - SVG + - SVG Attribute + - events + - イベント +translation_of: Web/SVG/Attribute/onclick +--- +
{{SVGRef}}
+ +

onclick 属性は、要素がクリックされたときに実行するスクリプトを指定します。

+ +

37個の要素がこの属性を使用します。 {{SVGElement("a")}}, {{SVGElement("altGlyph")}}, {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}},
+ {{SVGElement("circle")}}, {{SVGElement("defs")}}, {{SVGElement("desc")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}},
+ {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("metadata")}}, {{SVGElement("mpath")}},
+ {{SVGElement("path")}}, {{SVGElement("pattern")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("radialGradient")}}, {{SVGElement("rect")}},
+ {{SVGElement("script")}}, {{SVGElement("set")}}, {{SVGElement("stop")}}, {{SVGElement("style")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}},
+ {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("title")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}},
+ {{SVGElement("use")}}, {{SVGElement("view")}}

+ +
+ + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" onclick="alert('You have clicked the circle.')" />
+</svg>
+ +

{{EmbedLiveSample("topExample", "220", "220")}}

+
+ +

使用上のメモ

+ + + + + + + + + + + + + + + + +
値<anything>
既定値なし
アニメーション不可
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "interact.html#EventAttributes", "onclick")}}{{Spec2("SVG2")}}変更なし
{{SpecName("SVG1.1", "script.html#OnClickEventAttribute", "onclick")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.attributes.events.global.onclick")}}

diff --git a/files/ja/web/svg/attribute/points/index.html b/files/ja/web/svg/attribute/points/index.html new file mode 100644 index 0000000000..26c5086889 --- /dev/null +++ b/files/ja/web/svg/attribute/points/index.html @@ -0,0 +1,141 @@ +--- +title: points +slug: Web/SVG/Attribute/points +translation_of: Web/SVG/Attribute/points +--- +
{{SVGRef}}
+ +

points 属性は、点のリストを定義します。各点は、ユーザー座標系におけるX座標とY座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。

+ +

2つの要素がこの属性を使用しています: {{SVGElement("polyline")}}、および{{SVGElement("polygon")}}

+ +
+ + +
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polylineは開いた図形となる -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!-- polygonは閉じた図形となる -->
+  <polygon stroke="black" fill="none" transform="translate(100,0)"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  通常、XとYをカンマで、座標群をスペースで区切るのがベストプラクティスとされます。
+  その方法はコードを人間にとって読みやすいものにしてくれます。
+  -->
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

polyline

+ +

{{SVGElement('polyline')}}の場合、 points で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。

+ +

Note: polyline は最初の点と最後の点が接続されない開いた図形となります。

+ + + + + + + + + + + + + + + + +
Value[ {{cssxref("number")}}+ ]#
Default valuenone
AnimatableYes
+ +

Example

+ + + +
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polylineは開いた図形となる -->
+  <polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+</svg>
+ +

{{EmbedLiveSample('polyline', '100%', 200)}}

+ +

polygon

+ +

{{SVGElement('polygon')}}の場合、points で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。

+ +

Note: polygon は最初の点と最後の点が接続された閉じた図形となります。

+ + + + + + + + + + + + + + + + +
Value[ {{cssxref("number")}}+ ]#
Default valuenone
AnimatableYes
+ +

Example

+ + + +
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- polygonは閉じた図形となる -->
+  <polygon stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90" />
+</svg>
+ +

{{EmbedLiveSample('polygon', '100%', 200)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}{{Spec2("SVG2")}}Definition for <polygon>
{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}{{Spec2("SVG2")}}Definition for <polyline>
{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}{{Spec2("SVG1.1")}}Initial definition for <polygon>
{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}{{Spec2("SVG1.1")}}Initial definition for <polyline>
diff --git a/files/ja/web/svg/attribute/r/index.html b/files/ja/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..93c9b8198f --- /dev/null +++ b/files/ja/web/svg/attribute/r/index.html @@ -0,0 +1,124 @@ +--- +title: r +slug: Web/SVG/Attribute/r +tags: + - SVG + - SVG属性 +translation_of: Web/SVG/Attribute/r +--- +
{{SVGRef}}
+ +

r 属性は円の半径を定義します。

+ +

二つの要素、すなわち、{{SVGElement("circle")}} と {{SVGElement("radialGradient")}} が、この属性を使っています。

+ +
+ + +
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient r="0" id="myGradient000">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+  <radialGradient r="50%" id="myGradient050">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+  <radialGradient r="100%" id="myGradient100">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle cx="50"  cy="50" r="0"/>
+  <circle cx="150" cy="50" r="25"/>
+  <circle cx="250" cy="50" r="50"/>
+
+  <rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" />
+  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
+  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

circle

+ +

{{SVGElement('circle')}} に関しては、r は、円の半径を定めており、したがって、その円の大きさを定めています。ゼロ以下の値を用いると、その円はまったく描画されません。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値0
アニメーション可能かYes
+ +

注: SVG2 からは、r は 幾何属性 (Geometry Property) です。これが意味することは、r 属性を circle の CSS 属性としても使える、ということです。

+ +

radialGradient

+ +

{{ SVGElement("radialGradient") }} に関しては、r は、放射状グラデーションの末端の円の半径を定めています。

+ +

グラデーションの 100% にあたるピン留め箇所 (stop) が、この末端の円の外周にマッピングされるように、グラデーションが描画されます。ゼロ以下の値を用いると、グラデーションの最後の {{ SVGElement("stop") }} の色と不透明度を使った単一の色で、当該領域を塗りつぶすことになります。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値50%
アニメーション可能かYes
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName("SVG2", "geometry.html#R", "r")}}{{Spec2("SVG2")}}Definition as a geometry property
{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG2")}}Definition for SVG2 paint servers <radialGradient>
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Initial definition for <radialGradient>
{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Initial definition for <circle>
diff --git a/files/ja/web/svg/attribute/scale/index.html b/files/ja/web/svg/attribute/scale/index.html new file mode 100644 index 0000000000..9b13a345d1 --- /dev/null +++ b/files/ja/web/svg/attribute/scale/index.html @@ -0,0 +1,96 @@ +--- +title: scale +slug: Web/SVG/Attribute/scale +tags: + - Filters + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/scale +--- +
{{SVGRef}}
+ +

scale属性は、{{SVGElement("feDisplacementMap")}}フィルタプリミティブにおいて用いられる距離の尺度因子を定義します。その量は、{{SVGElement("filter")}}要素の{{SVGAttr("primitiveUnits")}}属性で規定される座標系で表されます。

+ +

1つの要素のみがこの属性を用います: {{SVGElement("feDisplacementMap")}}

+ +
+ + +
<svg viewBox="0 0 480 220" xmlns="http://www.w3.org/2000/svg">
+  <filter id="displacementFilter" x="-20%" y="-20%" width="140%" height="140%">
+    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
+    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5"/>
+  </filter>
+  <filter id="displacementFilter2" x="-20%" y="-20%" width="140%" height="140%">
+    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
+    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50"/>
+  </filter>
+
+  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter);""/>
+  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter2); transform: translateX(240px);""/>
+</svg>
+ +

{{EmbedLiveSample("topExample", "480", "200")}}

+
+ +

使用方法

+ + + + + + + + + + + + + + + + +
値{{cssxref("number")}}
既定値None
アニメーション可否はい
+ +
+
<number>
+
+

この値は距離に関する尺度因子をのみを定義します。

+ +

この属性の値が0の場合は、元画像に対して影響しません。

+
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("Filters 1.0", "#element-attrdef-fedisplacementmap-scale", "scale")}}{{Spec2("Filters 1.0")}}No change
{{SpecName("SVG1.1", "filters.html#feDisplacementMapScaleAttribute", "scale")}}{{Spec2("SVG1.1")}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("svg.elements.feDisplacementMap.scale")}}

diff --git a/files/ja/web/svg/attribute/stroke-dasharray/index.html b/files/ja/web/svg/attribute/stroke-dasharray/index.html new file mode 100644 index 0000000000..e83a7e18f9 --- /dev/null +++ b/files/ja/web/svg/attribute/stroke-dasharray/index.html @@ -0,0 +1,117 @@ +--- +title: stroke-dasharray +slug: Web/SVG/Attribute/stroke-dasharray +translation_of: Web/SVG/Attribute/stroke-dasharray +--- +
{{SVGRef}}
+ +

stroke-dasharray属性は、 輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。

+ +

Note: プレゼンテーション属性として、stroke-dasharray属性は、CSSプロパティとして使用することができます。

+ +

プレゼンテーション属性として、それはいくつかの要素に適用することができますが、つぎの12個の要素にのみ効果があります。

+ +
+ +
+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- No dashes nor gaps -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+
+  <!-- Dashes and gaps of the same size -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+          stroke-dasharray="4" />
+
+  <!-- Dashes and gaps of different sizes -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
+          stroke-dasharray="4 1" />
+
+  <!-- Dashes and gaps of various sizes with an odd number of values -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
+          stroke-dasharray="4 1 2" />
+
+  <!-- Dashes and gaps of various sizes with an even number of values -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
+          stroke-dasharray="4 1 2 3" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Valuenone | <dasharray>
Default valuenone
AnimatableYes
+ +
+
<dasharray>
+
+

A list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.

+ +

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

+
+
+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.stroke-dasharray")}}

+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG2")}}Definition for shapes and texts
{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
diff --git a/files/ja/web/svg/attribute/stroke-dashoffset/index.html b/files/ja/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..a988f3813d --- /dev/null +++ b/files/ja/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,114 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +
{{SVGRef}}
+ +

stroke-dashoffset属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。

+ +

Note: プレゼンテーション属性として、stroke-dashoffsetはCSSプロパティとして使用することができます。

+ +

プレゼンテーション属性として、それは、いくつかの要素に適用させることができますが、次の12個の要素にのみ効果があります。

+ +

 {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('line')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- No dash array -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+
+  <!-- No dash offset -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" />
+
+  <!--
+  The start of the dash array computation
+  is pulled by 3 user units
+  -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" />
+
+  <!--
+  The start of the dash array computation
+  is pushed by 3 user units
+  -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" />
+
+  <!--
+  The start of the dash array computation
+  is pulled by 1 user units which ends up
+  in the same rendering as the previous example
+  -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" />
+
+  <!--
+  the following red lines highlight the
+  offset of the dash array for each line
+  -->
+  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Usage notes

+ + + + + + + + + + + + + + + + +
Value<percentage> | <length>
Default value0
AnimatableYes
+ +

The offset is usually expressed in user units resolved against the {{SVGAttr('pathLength')}} but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.stroke-dashoffset")}}

+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG2")}}Definition for shapes and texts
{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
diff --git a/files/ja/web/svg/attribute/stroke-linecap/index.html b/files/ja/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..9942081df2 --- /dev/null +++ b/files/ja/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,73 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-linecap +--- +

« SVG 属性リファレンスホーム

+ +

stroke-linecap 要素は線を引いた時の開いている部分パスの終端の形状を指定します。

+ +

プレゼンテーション属性であるため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。

+ +

使用可能な場所

+ + + + + + + + + + + + + + + + + + + + +
カテゴリプレゼンテーション属性
値butt | round | square | inherit
アニメーションYes
標準文書SVG 1.1 (2nd Edition)
+ +

例

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <line stroke-linecap="butt"
+          x1="30" y1="30" x2="30" y2="90"
+          stroke="black" stroke-width="20"/>
+
+    <line stroke-linecap="round"
+          x1="60" y1="30" x2="60" y2="90"
+          stroke="black" stroke-width="20"/>
+
+    <line stroke-linecap="square"
+          x1="90" y1="30" x2="90" y2="90"
+          stroke="black" stroke-width="20"/>
+
+    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
+          stroke="white" />
+</svg>
+ +

Live sample

+ +

{{ EmbedLiveSample('Example','120','120') }}

+ +

要素

+ +

以下の要素で stroke-linecap を使うことができます

+ + diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.html b/files/ja/web/svg/attribute/stroke-linejoin/index.html new file mode 100644 index 0000000000..7eec62fecb --- /dev/null +++ b/files/ja/web/svg/attribute/stroke-linejoin/index.html @@ -0,0 +1,86 @@ +--- +title: stroke-linejoin +slug: Web/SVG/Attribute/stroke-linejoin +tags: + - NeedsCompatTable + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke-linejoin +--- +

« SVG 属性リファレンスホーム

+ +

stroke-linejoin 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。

+ +

プレゼンテーション属性のため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。

+ +

注意: miter オプションの最終的な見た目は stroke-miterlimit 属性の値の影響を受けます。

+ +

使用可能な場所

+ + + + + + + + + + + + + + + + + + + + +
カテゴリプレゼンテーション属性
値miter | round | bevel | inherit
アニメーションYes
標準文書SVG 1.1 (2nd Edition)
+ +

例

+ +
<?xml version="1.0"?>
+<svg width="120" height="300"
+     viewBox="0 0 120 300" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <polyline stroke-linejoin="miter"
+              points="-20,115 60,40 140,115"
+              stroke="black" stroke-width="40"
+              fill="none" />
+
+    <polyline stroke-linejoin="round"
+              points="-20,200 60,125 140,200"
+              stroke="black" stroke-width="40"
+              fill="none" />
+
+    <polyline stroke-linejoin="bevel"
+              points="-20,285 60,210 140,285"
+              stroke="black" stroke-width="40"
+              fill="none" />
+
+    <path d="M-20,115 L60,40 L140,115 M-20,200 L60,125 L140,200 M-20,285 L60,210 L140,285"
+          stroke="white" fill="none" />
+</svg>
+ +

Live sample

+ +

{{ EmbedLiveSample('Example','120','300') }}

+ +

要素

+ +

以下の要素で stroke-linejoin 属性を使うことができます

+ + + +

 

+ +

関連

+ + diff --git a/files/ja/web/svg/attribute/stroke/index.html b/files/ja/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..27c7ebdebe --- /dev/null +++ b/files/ja/web/svg/attribute/stroke/index.html @@ -0,0 +1,69 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/stroke +--- +

« SVG Attribute reference home

+ +

stroke属性は与えられた図形要素の外側に描画される色を定義します。stroke属性のデフォルト値は none です.

+ +

使用可能な場所

+ + + + + + + + + + + + + + + + + + + + +
カテゴリプレゼンテーション属性
値 +

<paint>, context-fill, context-stroke

+
アニメーション可
標準文書SVG 1.1 (2nd Edition)
+ +

例

+ +

SVG Line with stroke

+ +

例1: stroke を使用した直線

+ +
<svg height="50" width="300">
+    <path stroke="green" d="M5 20 1215 0" />
+</svg>
+ +

{{ EmbedLiveSample('例1_stroke_を使用した直線', '300', '50', '', 'Web/SVG/Attribute/stroke') }}

+ +

例2: 黒丸の枠線として青い stroke を使用

+ +
​​<svg height="100" width="100">
+    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
+</svg>
+ +

{{ EmbedLiveSample('例2_黒丸の枠線として青い_stroke_を使用', '100', '120', '', 'Web/SVG/Attribute/stroke') }}

+ +

context-stroke を使用する

+ +

非標準かつ機能が制限されたcontext-stroke (およびcontext-fill) については {{cssxref("-moz-context-properties")}} プロパティを参照して下さい。

+ +

要素

+ +

以下の要素でstroke属性を使用できます。

+ + diff --git a/files/ja/web/svg/attribute/transform/index.html b/files/ja/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..dc8dc76929 --- /dev/null +++ b/files/ja/web/svg/attribute/transform/index.html @@ -0,0 +1,270 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +tags: + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/transform +--- +
{{SVGRef}}
+ +

transform 属性は、要素とその要素の子に適用される変換定義のリストを定義します。

+ +
+ + +
<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="grey"
+     transform="rotate(-10 50 100)
+                translate(-36 45.5)
+                skewX(40)
+                scale(1 0.5)">
+    <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
+  </g>
+
+  <use xlink:href="#heart" fill="none" stroke="red"/>
+</svg>
+
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

Note: SVG2 では、 transform はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの {{cssxref('transform')}} のドキュメントを参照してください。

+ +

プレゼンテーション属性ですので、 transform はあらゆる要素で使用することができます (SVG 1.1 では、 {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}}, {{SVGElement('use')}} の16要素でのみ使用することができました。)。

+ +

また、 SVG 1.1 からの遺物として、 {{SVGElement('linearGradient')}} と {{SVGElement('radialGradient')}} は gradientTransform 属性に対応しており、 {{SVGElement('pattern')}} は patternTransform 属性に対応しており、どちらも transform 属性と全く同じように動作します。

+ + + + + + + + + + + + + + + + +
値<transform-list>
既定値none
アニメーション可
+ +

変換関数

+ +

以下の変換関数は、 transform 属性の <transform-list> で使用することができます。

+ +

警告: 仕様書によれば、 CSS の変換関数も使用することができます。しかし、互換性は保証されていません。

+ +

Matrix

+ +

matrix(<a> <b> <c> <d> <e> <f>) 変換関数は、6つの値の変換行列の形式で変形を指定します。 matrix(a,b,c,d,e,f) は次の変換行列を適用することと等価です。 (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} これは、前の座標系から新しい座標系への座標の写像を次の行列の等式によって行うものです。(xnewCoordSysynewCoordSys1)=(acebdf001)(xprevCoordSysyprevCoordSys1)=(axprevCoordSys+cyprevCoordSys+ebxprevCoordSys+dyprevCoordSys+f1) \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

+ +

例

+ + + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <rect x="10" y="10" width="30" height="20" fill="green" />
+
+  <!--
+  In the following example we are applying the matrix:
+  [a c e]    [3 -1 30]
+  [b d f] => [1  3 40]
+  [0 0 1]    [0  0  1]
+
+  which transform the rectangle as such:
+
+  top left corner: oldX=10 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
+
+  top right corner: oldX=40 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
+
+  bottom left corner: oldX=10 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
+
+  bottom right corner: oldX=40 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
+  -->
+  <rect x="10" y="10" width="30" height="20" fill="red"
+        transform="matrix(3 1 -1 3 30 40)" />
+</svg>
+ +

{{EmbedLiveSample('Matrix', '100%', 200)}}

+ +

Translate

+ +

translate(<x> [<y>]) 変換関数は、オブジェクトを x と y によって移動します。 y が提供されなかった場合は、 0 と見なします。

+ +

言い換えれば、次の通りです。

+ +
    xnew = xold + <x>
+    ynew = yold + <y>
+
+ +

例

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- No translation -->
+  <rect x="5" y="5" width="40" height="40" fill="green" />
+
+  <!-- Horizontal translation -->
+  <rect x="5" y="5" width="40" height="40" fill="blue"
+        transform="translate(50)" />
+
+  <!-- Vertical translation -->
+  <rect x="5" y="5" width="40" height="40" fill="red"
+        transform="translate(0 50)" />
+
+  <!-- Both horizontal and vertical translation -->
+  <rect x="5" y="5" width="40" height="40" fill="yellow"
+         transform="translate(50,50)" />
+</svg>
+ +

{{EmbedLiveSample('Translate', '100%', 200)}}

+ +

Scale

+ +

scale(<x> [<y>]) 変換関数は、 x と y による拡大縮小操作を指定します。 y が提供されなかった場合は、 x と同じと見なします。

+ +

例

+ + + +
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- uniform scale -->
+  <circle cx="0" cy="0" r="10" fill="red"
+          transform="scale(4)" />
+
+  <!-- vertical scale -->
+  <circle cx="0" cy="0" r="10" fill="yellow"
+          transform="scale(1,4)" />
+
+  <!-- horizontal scale -->
+  <circle cx="0" cy="0" r="10" fill="pink"
+          transform="scale(4,1)" />
+
+  <!-- No scale -->
+  <circle cx="0" cy="0" r="10" fill="black" />
+</svg>
+ +

{{EmbedLiveSample('Scale', '100%', 200)}}

+ +

Rotate

+ +

rotate(<a> [<x> <y>]) 変換関数は、指定された点を軸に a 度の回転を指定します。オプションの引数 x と y が提供されなかった場合、回転は現在のユーザーの座標系の原点を基準に行われます。オプションの引数 x と y が指定された場合は、回転は (x, y) を基準に行われます。

+ +

例

+ + + +
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="10" height="10" />
+
+  <!-- rotation is done around the point 0,0 -->
+  <rect x="0" y="0" width="10" height="10" fill="red"
+        transform="rotate(100)" />
+
+  <!-- rotation is done around the point 10,10 -->
+  <rect x="0" y="0" width="10" height="10" fill="green"
+        transform="rotate(100,10,10)" />
+</svg>
+ +

{{EmbedLiveSample('Rotate', '100%', 200)}}

+ +

SkewX

+ +

skewX(<a>) 変換関数は、 X 軸を基準に a 度の傾斜変換を指定します。

+ +

Example

+ + + +
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewX(30)" />
+</svg>
+ +

{{EmbedLiveSample('SkewX', '100%', 200)}}

+ +

SkewY

+ +

skewY(<a>) 変換関数は、 Y 軸を基準に a 度の傾斜変換を指定します。

+ +

例

+ + + +
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-3" y="-3" width="6" height="6" />
+
+  <rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewY(30)" />
+</svg>
+ +

{{EmbedLiveSample('SkewY', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}{{Spec2('CSS Transforms 2')}}
{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}{{Spec2('CSS3 Transforms')}}
{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}{{Spec2("SVG1.1")}}初回定義
diff --git a/files/ja/web/svg/attribute/viewbox/index.html b/files/ja/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..c0cf002341 --- /dev/null +++ b/files/ja/web/svg/attribute/viewbox/index.html @@ -0,0 +1,55 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +

« SVG Attribute reference home

+ +

viewBox属性は、特定のcontainer要素に合わせるためのグラフィックス stretchのセットを指定できます。

+ +

The value of the viewBox attribute is a list of four numbers min-x, min-y, width and height, separated by whitespace and/or a comma, which specify a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute {{ SVGAttr("preserveAspectRatio") }}.

+ +

Negative values for width or height are not permitted and a value of zero disables rendering of the element.

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
ValueSee above
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+ +

例

+ +

要素

+ +

以下の要素がviewBox属性を使います。

+ + + +

See also

+ + diff --git a/files/ja/web/svg/attribute/writing-mode/index.html b/files/ja/web/svg/attribute/writing-mode/index.html new file mode 100644 index 0000000000..e62465900f --- /dev/null +++ b/files/ja/web/svg/attribute/writing-mode/index.html @@ -0,0 +1,85 @@ +--- +title: writing-mode +slug: Web/SVG/Attribute/writing-mode +tags: + - NeedsExample + - SVG + - SVG Attribute +translation_of: Web/SVG/Attribute/writing-mode +--- +
{{SVGRef}}
+ +

writing-mode 属性は、 {{SVGElement("text")}} 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 writing-mode 属性は {{ SVGElement("text") }} 要素にのみ適用されます。 {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }} サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ {{ SVGAttr("direction") }} および {{ SVGAttr("unicode-bidi") }} により、 {{ SVGElement("text") }} 要素内で変更される可能性があることに注意してください)。

+ +

注: プレゼンテーション属性なので、 writing-mode は CSS プロパティとして使用することができます。詳しくは CSS の {{cssxref("writing-mode")}} プロパティを参照してください。

+ +

プレゼンテーション属性として、どの要素にも適用できますが、 {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} の5つの要素にのみ効果があります。

+ +

使用上の注意

+ + + + + + + + + + + + + + + + +
既定値horizontal-tb
値horizontal-tb | vertical-rl | vertical-lr
アニメーション可能はい
+ +
+
horizontal-tb
+
この値はブロックのフロー方向を上から下に定義します。書字方向と文字の方向は共に水平方向です。
+
vertical-rl
+
この値はブロックのフロー方向を右から左に定義します。書字方向と文字の方向は共に垂直方向です。
+
vertical-lr
+
この値はブロックのフロー方向を左から右に定義します。書字方向と文字の方向は共に垂直方向です。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}{{Spec2("CSS3 Writing Modes")}}CSS Writing Modes 3 の中で定義
{{SpecName("SVG2", "text.html#WritingModeProperty", "writing-mode")}}{{Spec2("SVG2")}}主に CSS Writing Modes 3 の定義を参照し、非推奨の SVG 1.1 の値と新しい値との対応付けを定義します。
{{SpecName("SVG1.1", "text.html#WritingModeProperty", "writing-mode")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.attributes.presentation.writing-mode")}}

+ +

関連情報

+ + diff --git a/files/ja/web/svg/attribute/x/index.html b/files/ja/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..33a25a2bef --- /dev/null +++ b/files/ja/web/svg/attribute/x/index.html @@ -0,0 +1,65 @@ +--- +title: x +slug: Web/SVG/Attribute/x +translation_of: Web/SVG/Attribute/x +--- +

« SVG属性リファレンス ホームへ

+

この属性はユーザー座標のx軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。

+

値の明示がなければ、0として記入されたものとして、 {{ SVGElement("filter") }} と {{ SVGElement("mask") }} 要素に関しては -10% と記入されたものと解釈します。

+

使用可能な場所

+ + + + + + + + + + + + + + + + + + + +
カテゴリなし
値<coordinate>
アニメーション可
標準文書SVG 1.1 (2nd Edition): altGlyph element
+ SVG 1.1 (2nd Edition): cursor element
+ SVG 1.1 (2nd Edition): fePointLight element
+ SVG 1.1 (2nd Edition): feSpotLight element
+ SVG 1.1 (2nd Edition): filter element
+ SVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): glyphRef element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): text element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ SVG 1.1 (2nd Edition): tspan element
+

{{ page("/en/SVG/Content_type","coordinate") }}

+

要素

+

次の要素は x 属性を使用することができます。

+ diff --git a/files/ja/web/svg/attribute/x1/index.html b/files/ja/web/svg/attribute/x1/index.html new file mode 100644 index 0000000000..cf76281b74 --- /dev/null +++ b/files/ja/web/svg/attribute/x1/index.html @@ -0,0 +1,160 @@ +--- +title: x1 +slug: Web/SVG/Attribute/x1 +tags: + - Drawing Lines + - Gradients + - LInes + - SVG + - SVG Attribute + - SVG Gradients + - SVGグラデーション + - SVG属性 + - Vector Graphics + - グラデーション + - ベクター画像 + - 描画 + - 直線 +translation_of: Web/SVG/Attribute/x1 +--- +
{{SVGRef}}
+ +

x1 属性は、二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定するのに使います。一つしか座標を必要としない要素は、これの代わりに {{SVGAttr("x")}} 属性を使います。

+ +

二つの要素がこの属性を使っています。つまり、{{ SVGElement("line") }} と {{ SVGElement("linearGradient") }} です。

+ +
+ + +
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <line x1="1" x2="5" y1="1" y2="9" stroke="red" />
+  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
+  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
+</svg>
+ +

{{EmbedLiveSample('topExample', '100%', 200)}}

+
+ +

line

+ +

{{SVGElement('line')}} に関しては、x1 は、その直線の開始点の x 座標を定めます。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値0
アニメーション可能Yes
+ +

例

+ + + +
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <line x1="1" x2="5" y1="1" y2="9" stroke="red"   />
+  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
+  <line x1="9" x2="5" y1="1" y2="9" stroke="blue"  />
+</svg>
+ +

{{EmbedLiveSample('line', '100%', 200)}}

+ +

linearGradient

+ +

{{SVGElement('linearGradient')}} に関しては、x1 は、グラデーションのストップ値をマッピングするのに使われるグラデーション・ベクトル (gradient vector) の開始点の x 座標を定めます。この属性の正確な振る舞いは、{{SVGAttr('gradientUnits')}} 属性の影響を受けます。

+ + + + + + + + + + + + + + + + +
値<length> | <percentage>
デフォルト値0%
アニメーション可能Yes
+ +

例

+ + + +
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
+  <!--
+  デフォルトでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
+  左端から始まります。
+  -->
+  <linearGradient x1="0%" id="g0">
+    <stop offset="0"    stop-color="black"  />
+    <stop offset="100%" stop-color="red" />
+  </linearGradient>
+
+  <rect x="1"  y="1" width="8" height="8" fill="url(#g0)" />
+
+  <!--
+  ここでは、グラデーション・ベクトルは、適用先の形状を囲う境界の
+  左端から 80% のところから始まります。
+  -->
+  <linearGradient x1="80%" id="g1">
+    <stop offset="0"    stop-color="black"  />
+    <stop offset="100%" stop-color="red" />
+  </linearGradient>
+
+  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
+</svg>
+ +

{{EmbedLiveSample('linearGradient', '100%', 200)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName("SVG2", "shapes.html#LineElementX1Attribute", "x1")}}{{Spec2("SVG2")}}Definition for <line>
{{SpecName("SVG2", "pservers.html#LinearGradientElementX1Attribute", "x1")}}{{Spec2("SVG2")}}Definition for <linearGradient>
{{SpecName("SVG1.1", "shapes.html#LineElementX1Attribute", "x1")}}{{Spec2("SVG1.1")}}Initial definition for <line>
{{SpecName("SVG1.1", "pservers.html#LinearGradientElementX1Attribute", "x1")}}{{Spec2("SVG1.1")}}Initial definition for <linearGradient>
diff --git a/files/ja/web/svg/attribute/y/index.html b/files/ja/web/svg/attribute/y/index.html new file mode 100644 index 0000000000..da35c11888 --- /dev/null +++ b/files/ja/web/svg/attribute/y/index.html @@ -0,0 +1,65 @@ +--- +title: 'y' +slug: Web/SVG/Attribute/y +translation_of: Web/SVG/Attribute/y +--- +

« SVG属性リファレンスホームへ

+

この属性はユーザー座標系のy軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。

+

値の明示がなければ、0として記入されたものとして、 {{ SVGElement("filter") }} と {{ SVGElement("mask") }} 要素に関しては -10% と記入されたものと解釈します。

+

使用可能な場所

+ + + + + + + + + + + + + + + + + + + +
カテゴリなし
値<coordinate>
アニメーション可
標準文書SVG 1.1 (2nd Edition): altGlyph element
+ SVG 1.1 (2nd Edition): cursor element
+ SVG 1.1 (2nd Edition): fePointLight element
+ SVG 1.1 (2nd Edition): feSpotLight element
+ SVG 1.1 (2nd Edition): filter element
+ SVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): glyphRef element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): text element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ SVG 1.1 (2nd Edition): tspan element
+

{{ page("/ja/docs/Web/SVG/Content_type","coordinate") }}

+

要素

+

次の要素は y 属性を使用することができます。

+ -- cgit v1.2.3-54-g00ecf