diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/svg/attribute | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/svg/attribute')
30 files changed, 4860 insertions, 0 deletions
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 +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<p><strong><code>accent-height</code></strong>属性は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。</p> + +<p>1つの要素のみがこの属性を使用します: {{SVGElement("font-face")}}</p> + +<h2 id="font-face" name="font-face">font-face</h2> + +<p>{{SVGElement("font-face")}}に対して、<code>accent-height</code>は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td><a href="/ja/docs/Web/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td>Value of {{SVGAttr("ascent")}}</td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#FontFaceElementAccentHeightAttribute", "accent-height")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("svg.elements.font-face.accent-height")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGAttr("cap-height")}}</li> + <li>{{SVGAttr("x-height")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>alignment-baseline</code></strong> 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は <code>alignment-baseline</code> プロパティの計算値と同じ名前の値となります。</p> + +<p class="note"><strong>注:</strong> プレゼンテーション属性として、 <code>alignment-baseline</code> は CSS プロパティとして使用することができます。</p> + +<p>プレゼンテーション属性として、あらゆる要素に適用できますが、効果があるのは {{SVGElement("tspan")}}, {{SVGElement("tref")}}, {{SVGElement("altGlyph")}}, and {{SVGElement("textPath")}} の4つの属性のみです。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td><code>auto</code> | <code>baseline</code> | <code>before-edge</code> | <code>text-before-edge</code> | <code>middle</code> | <code>central</code> | <code>after-edge</code> | <code>text-after-edge</code> | <code>ideographic</code> | <code>alphabetic</code> | <code>hanging</code> | <code>mathematical</code> | <code>top</code> | <code>center</code> | <code>bottom</code></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>auto</code> {{deprecated_inline}}</dt> + <dd>この値はその文字が所属する書法のドミナントベースラインです。すなわち、親のドミナントベースラインを使用します。</dd> + <dt><code>baseline</code></dt> + <dd>Uses the {{Glossary("dominant baseline")}} choice of the parent. Matches the box’s corresponding {{Glossary("baseline")}} to that of its parent.</dd> + <dt><code>before-edge</code> {{deprecated_inline}}</dt> + <dd>The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.</dd> + <dt><code>text-bottom</code></dt> + <dd>Matches the bottom of the box to the top of the parent’s content area.</dd> + <dt><code>text-before-edge</code></dt> + <dd> + <p>The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.</p> + + <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-top</code>.</p> + </dd> + <dt><code>middle</code></dt> + <dd>Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.</dd> + <dt><code>central</code></dt> + <dd>Matches the box’s central baseline to the central baseline of its parent.</dd> + <dt><code>after-edge</code> {{deprecated_inline}}</dt> + <dd> + <p>The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.</p> + </dd> + <dt><code>text-top</code></dt> + <dd>Matches the top of the box to the top of the parent’s content area.</dd> + <dt><code>text-after-edge</code></dt> + <dd> + <p>The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.</p> + + <p class="note"><strong>Note:</strong> This keyword may be mapped to <code>text-bottom</code>.</p> + </dd> + <dt><code>ideographic</code></dt> + <dd>Matches the box’s ideographic character face under-side baseline to that of its parent.</dd> + <dt><code>alphabetic</code></dt> + <dd>Matches the box’s alphabetic baseline to that of its parent.</dd> + <dt><code>hanging</code></dt> + <dd> + <p>The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.</p> + </dd> + <dt><code>mathematical</code></dt> + <dd>Matches the box’s mathematical baseline to that of its parent.</dd> + <dt><code>top</code></dt> + <dd> + <p>Aligns the top of the aligned subtree with the top of the line box.</p> + </dd> + <dt><code>center</code></dt> + <dd>Aligns the center of the aligned subtree with the center of the line box.</dd> + <dt><code>bottom</code></dt> + <dd>Aligns the bottom of the aligned subtree with the bottom of the line box.</dd> +</dl> + +<p>SVG 2 introduces some changes to the definition of this property. In particular: the values <code>auto</code>, <code>before-edge</code>, and <code>after-edge</code> have been removed. For backwards compatibility, <code>text-before-edge</code> may be mapped to <code>text-top</code> and <code>text-after-edge</code> to <code>text-bottom</code>. Neither <code>text-before-edge</code> nor <code>text-after-edge</code> should be used with the {{cssxref("vertical-align")}} property.</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("Example")}}</p> + +<p>他の要素 ({{SVGElement("text")}} など) におけるオブジェクトの配置については、 {{SVGAttr("dominant-baseline")}} を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Inline", "#propdef-alignment-baseline", "alignment-baseline")}}</td> + <td>{{Spec2("CSS3 Inline")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>CSS Inline Layout および注釈を参照し、 <code>auto</code>, <code>before-edge</code>, <code>after-edge</code>, <code>text-before-edge</code>, <code>text-after-edge</code> へ変更</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#AlignmentBaselineProperty", "alignment-baseline")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.attributes.presentation.alignment-baseline")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("alignment-baseline", "CSS alignment-baseline")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cx</code></strong>属性は中心のx-座標を定義します。</p> + +<p>3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> +</div> + +<h2 id="circle" name="circle">circle</h2> + +<p>{{SVGElement('circle')}}に対して、<code>cx</code>は、図形のx-軸の中心を定義します。</p> + +<table class="プロパティ"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length-percentage")}}</td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong>SVG2として開始する場合には、<code>cx</code>は<em>ジオメトリプロパティ</em>です。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="ellipse" name="ellipse">ellipse</h2> + +<p>{{SVGElement('ellipse')}}に対して、<code>cx</code>は、図形のx-軸の中心を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length-percentage")}}</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong>SVG2として開始する場合には、<code>cx</code>は<em>ジオメトリプロパティ</em>です。これは本属性が楕円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="radialGradient" name="radialGradient">radialGradient</h2> + +<p>{{SVGElement('radialGradient')}}に対して、<code>cx</code>は、放射状勾配の終端円のx-軸の中心を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("length")}}</td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h4 id="Example" name="Example">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CX", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>SVG2ペイントサーバに対する定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><radialGradient></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><ellipse></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><circle></code>に対する初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute/cy">cy</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute/r">r</a></li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>cy</code></strong>属性は中心のy-座標を定義します。</p> + +<p>3つの要素がこの属性を用います: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p> +</div> + +<h2 id="circle" name="circle">circle</h2> + +<p>{{SVGElement('circle')}}に対して、<code>cy</code>は、図形のy-軸の中心を定義します。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong> SVG2として開始する場合には、<code>cy</code>は<em>ジオメトリプロパティ</em>です。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="ellipse" name="ellipse">ellipse</h2> + +<p>{{SVGElement('ellipse')}}に対して、<code>cy</code>は図形中心のy-座標を定義します。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong> SVG2として開始する場合には、<code>cy</code>は<em>ジオメトリプロパティ</em>です。これは本属性が円へのCSSプロパティとしても利用可能であることを意味します。</p> + +<h2 id="radialGradient" name="radialGradient">radialGradient</h2> + +<p>{{SVGElement('radialGradient')}}に対して、<code>cy</code>は、放射状勾配の終端円のy-座標を定義します。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h4 id="Example" name="Example">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>ジオメトリプロパティとしての定義</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>SVG2ペイントサーバに対する定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><radialGradient></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><ellipse></code>に対する初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><circle></code>に対する初期定義</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>d</code></strong>属性は描かれるパスを定義します。</p> + +<p>パスの定義は<a href="#Path_commands">パスコマンド</a>のリストで、各コマンドはコマンド文字とコマンドへのパラメータを示す数値から構成されます。コマンドの詳細は以下になります。</p> + +<p>３つの要素がこの属性を有します： {{SVGElement("path")}}, {{SVGElement("glyph")}}, {{SVGElement("missing-glyph")}}</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +</div> + +<h2 id="path">path</h2> + +<p>{{SVGElement('path')}}要素に対しては、<code>d</code>属性は、描かれるパスを定義するパスコマンドの並びを含む文字列です。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">初期値</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="glyph">glyph</h2> + +<p class="warning"><strong>警告:</strong>SVG2において、{{SVGElement('glyph')}}は非推奨であり、用いるべきではありません。</p> + +<p>{{SVGElement('glyph')}}要素に対しては、<code>d</code>属性はグリフのアウトライン形状を定義するパスコマンドの並びを含む文字列です。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">初期値</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注意:</strong>原点(座標<code>0</code>,<code>0</code>)は通常、コンテキストの<em>左上の角</em>です。しかし、{{SVGElement("glyph")}}要素は、それ自身の原点を文字ボックスの<em>左下</em>に持ちます。</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>警告:</strong>SVG2において、{{SVGElement('missing-glyph')}}は非推奨であり、用いるべきではありません。</p> + +<p>{{SVGElement('missing-glyph')}}要素に対しては、<code>d</code>属性は、グリフのアウトライン形状を定義するパスコマンドの並びを含んだ文字列です。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">初期値</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Path_commands" name="Path_commands">パスコマンド</h2> + +<p>パスコマンドは、描かれるパスの定義を指定します。各コマンドは、コマンド文字とコマンドパラメータを示す数値で構成されます。</p> + +<p>SVGでは、6つのタイプのパスコマンドを定義しており、全部で20個のコマンドがあります:</p> + +<ul> + <li>MoveTo: <code>M</code>, <code>m</code></li> + <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li> + <li>3次ベジエ曲線: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li> + <li>2次ベジエ曲線: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li> + <li>楕円円弧曲線: <code>A</code>, <code>a</code></li> + <li>ClosePath: <code>Z</code>, <code>z</code></li> +</ul> + +<p class="note"><strong>ノート:</strong>コマンドは<em>ケースセンシティブ（大小文字の区別あり）</em>です. 大文字のコマンドは絶対座標を指定し、これに対して小文字のコマンドは現在位置からの相対座標を指定します。</p> + +<p>コマンドへの引数として負値を指定することは常に可能です:</p> + +<ul> + <li>負の角度は反時計回りとなります;</li> + <li><em>絶対値</em>での負の<em>x</em>と<em>y</em>の値は反転座標と解釈されます;</li> + <li><em>相対値</em>での負の<em>x</em>の値は左へ移動,相対値での負の<em>y</em>の値は上方向へ移動します。</li> +</ul> + +<h3 id="MoveTo_path_commands" name="MoveTo_path_commands">MoveToパスコマンド</h3> + +<p><em>MoveTo</em>での指定は、筆記用具を持ち上げ他の位置で下ろす動作と考えられます―言い換えると、<em>現在位置</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>})の移動です。P<sub>o </sub>と新しい<em>現在位置</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>})との間には線は描かれません。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td> + <p><em>現在位置</em>を座標<code>x</code>,<code>y</code>へ移動します。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo(<code>L</code>)コマンドと解釈されます(<em>以下を参照</em>)。</p> + + <p><strong>形式:</strong> P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">m</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td> + <p><em>現在位置</em>を最後に把握されたパス位置からの<code>dx</code>をx軸方向、<code>dy</code>をy軸に沿った並進として移動します。後続する任意個の座標の組は暗黙的に相対座標でのLineTo(<code>l</code>)コマンドとして解釈されます(<em>以下を参照</em>)。</p> + + <p><strong>形式:</strong> P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples" name="Examples">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('MoveTo_path_commands', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands" name="LineTo_path_commands">LineToパスコマンド</h3> + +<p><em>LineTo</em>は、<em>現在位置</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>})から<em>終端位置</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>})への直線を指定されたパラメータに基づいて描きます。<em>終端位置</em>(P<sub>n</sub>)は、次のコマンドでの<em>現在位置</em> (P<sub>o</sub>′)となります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">L</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td> + <p><em>現在位置</em>から<code>x</code>,<code>y</code>で指定される<em>終端位置</em>へ直線を描きます。後続する任意個の座標の組は暗黙的に絶対座標でのLineTo (<code>L</code>) コマンドと解釈されます。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td> + <p><em>現在位置</em>から、<em>現在位置</em>に対するx-軸方向に<code>dx</code>、y-軸方向に<code>dy</code>で表される<em>終端位置</em>への直線を描きます。後続する任意個の座標の組は、暗黙的に相対座標でのLineTo (<code>l</code>) コマンドと解釈されます(<em>以下を参照</em>)。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td> + <p><em>現在位置</em>から、パラメータ<code>x</code>と<em>現在位置の</em>y座標で指定される<em>終端座標</em>までの水平線を描きます。後続する任意個の値は、暗黙的に絶対座標での水平線用のLineTo (<code>H</code>)コマンドと解釈されます。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {<code>x</code>, y<sub>o</sub>}</p> + </td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td> + <p><em>現在位置</em>から、<em>現在位置</em>からのx-軸方向への<code>dx</code>の並進と<em>現在位置の</em>y座標で指定される<em>終端位置</em>までの水平線を描きます。後続する任意個の値は、暗黙的に相対座標での水平線用のLineTo (<code>h</code>)コマンドと解釈されます。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub>}</p> + </td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td> + <p><em>現在位置</em>から、パラメータ<code>y</code>と<em>現在位置の</em>x座標で指定される<em>終端座標</em>までの垂直線を描きます。後続する任意個の値は、暗黙的に絶対座標での垂直線用のLineTo (<code>V</code>)コマンドと解釈されます。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td> + <p><em>現在位置</em>から、<em>現在位置</em>からのy-軸方向への<code>dx</code>の並進と<em>現在位置の</em>x座標で指定される<em>終端位置</em>までの垂直線を描きます。後続する任意個の値は、暗黙的に相対座標での垂直線用のLineTo (<code>v</code>)コマンドと解釈されます。</p> + + <p><strong>形式:</strong> P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o, </sub>y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples_2" name="Examples_2">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p> + +<h3 id="Cubic_Bezier_Curve" name="Cubic_Bezier_Curve">3次ベジエ曲線</h3> + +<p><em>3次<a href="https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">ベジエ曲線</a></em>は4点で定義される滑らかな曲線です:</p> + +<dl> + <dt><em>開始位置 (現在位置)</em></dt> + <dd>(P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</dd> + <dt><em>終端位置</em></dt> + <dd>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</dd> + <dt><em>開始制御点</em></dt> + <dd>(P<sub>cs</sub> = {x<sub>cs</sub>, y<sub>cs</sub>})<br> + (曲線の開始点近くの曲率を制御します)</dd> + <dt><em>終端制御点</em></dt> + <dd>(P<sub>ce</sub> = {x<sub>ce</sub>, y<sub>ce</sub>})<br> + (曲線の終端近くの曲率を制御します)</dd> +</dl> + +<p>描画後に、<em>終端位置</em>(P<sub>n</sub>)は、次のコマンドに対する<em>現在位置</em> (P<sub>o</sub>′)となります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">C</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td> + <p><em>開始位置</em>から、<code>x</code>,<code>y</code>で指定される<em>終端位置</em>までの3次ベジエ曲線を描きます。<em>開始制御点</em>は<code>x1</code>,<code>y1</code>で指定され、<em>終端制御点</em>は<code>x2</code>,<code>y2</code>で指定されます。後続する任意個の3つ組の座標は、暗黙的な絶対座標での3次ベジエ曲線(<code>C</code>)コマンドへのパラメータと解釈されます。</p> + + <dl> + <dt>形式:</dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ;<br> + P<sub>cs</sub> = {<code>x1</code>, <code>y1</code>} ;<br> + P<sub>ce</sub> = {<code>x2</code>, <code>y2</code>}</dd> + </dl> + </td> + </tr> + <tr> + <th scope="row">c</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td> + <p><em>開始位置</em>から、<em>開始位置</em>からのx-軸方向に<code>dx</code>,y-軸方向に<code>dy</code>とした並進となる<em>終端位置</em>までの3次ベジエ曲線を描きます。<em>開始制御点</em>は、<em>開始点</em> (曲線の開始位置)をx-軸方向に<code>dx1</code>,y-軸方向に<code>dy1</code>と並進した点です。<em>終端制御点</em>は<em>現在位置</em> (曲線の開始位置)を、x-軸方向に<code>dx2</code>,y-軸方向に<code>dy2</code>と並進した点です。後続する任意個の3つ組の座標は、暗黙的に相対座標での3次ベジエ曲線 (<code>c</code>) コマンドと解釈されます。</p> + + <dl> + <dt>形式:</dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ;<br> + P<sub>cs</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>} ;<br> + P<sub>ce</sub> = {x<sub>o</sub> + <code>dx2</code>, y<sub>o</sub> + <code>dy2</code>}</dd> + </dl> + </td> + </tr> + <tr> + <th scope="row">S</th> + <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td><em>開始位置</em>から、<code>x</code>,<code>y</code>で指定される<em>終端位置</em>までの滑らかな3次ベジエ曲線を描きます。<em>終端制御点</em>は、<code>x2</code>,<code>y2</code>で指定されます。<em>開始制御点</em>は、直前の曲線コマンドの<em>終端制御点</em>が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、<em>開始制御点</em>は曲線の開始位置(<em>現在座標</em>)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな3次ベジエ曲線(<code>S</code>)コマンドへのパラメータと解釈されます。</td> + </tr> + <tr> + <th scope="row">s</th> + <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td><em>開始位置</em>から、<em>現在位置</em>からのx-軸方向への<code>dx</code>,y-軸方向への<code>dy</code>への並進で表される<em>終端位置</em>までの滑らかな3次ベジエ曲線を描きます。<em>終端制御点</em>は、<em>現在位置</em>(曲線の開始点)をx-軸方向への<code>dx2</code>とy-軸方向への<code>dy2</code>だけ並進させた点です。<em>開始制御点</em>は、直前の曲線コマンドの<em>終端位置</em>が鏡映されます。もし直前のコマンドが3次ベジエ曲線でない場合は、<em>開始制御点</em>は曲線の開始位置(<em>現在座標</em>)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな3次ベジエ曲線 (<code>s</code>) コマンドと解釈されます。</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_3" name="Examples_3">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Cubic_Bezier_Curve', '100%', 200)}}</p> + +<h3 id="Quadratic_Bezier_Curve" name="Quadratic_Bezier_Curve">2次ベジエ曲線</h3> + +<p><em>2次<a href="https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">ベジエ曲線</a></em>は3点で定義される滑らかな曲線です:</p> + +<dl> + <dt><em>開始座標(現在位置)</em></dt> + <dd>P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>}</dd> + <dt><em>終端座標</em></dt> + <dd>P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>}</dd> + <dt><em>制御点</em></dt> + <dd>P<sub>c</sub> = {x<sub>c</sub>, y<sub>c</sub>}<br> + (曲率を制御します)</dd> +</dl> + +<p>描画後に、<em>終端位置</em>(P<sub>n</sub>)は、次のコマンドに対する<em>現在位置</em>(P<sub>o</sub>′)となります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">Q</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td> + <td> + <p><em>開始位置</em>から<code>x</code>,<code>y</code>で指定される<em>終端位置</em>までの2次ベジエ曲線を描きます。<em>制御点</em>は<code>x1</code>,<code>y1</code>で指定されます。後続する任意個の座標の組は、暗黙的に絶対座標での4次ベジエ曲線 (<code>Q</code>) コマンドへのパラメータと解釈されます。</p> + + <dl> + <dt><strong>形式:</strong></dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ;<br> + P<sub>c</sub> = {<code>x1</code>, <code>y1</code>}</dd> + </dl> + </td> + </tr> + <tr> + <th scope="row">q</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td> + <td> + <p><em>開始位置</em>から、<em>開始位置</em>からのx-軸方向に<code>dx</code>,y-軸方向に<code>dy</code>とした並進となる<em>終端位置</em>までの2次ベジエ曲線を描きます。<em>制御点</em>は、<em>開始点</em> (曲線の開始位置)をx-軸方向に<code>dx1</code>,y-軸方向に<code>dy1</code>と並進した点です。後続する任意個の座標は、暗黙的に相対座標での2次ベジエ曲線 (<code>q</code>) コマンドへのパラメータと解釈されます。</p> + + <dl> + <dt>形式:</dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ;<br> + P<sub>c</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>}</dd> + </dl> + </td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td> + <p><em>開始位置</em>から<code>x</code>,<code>y</code>で指定される<em>終端位置</em>までの滑らかな2次ベジエ曲線を描きます。<em>制御点</em>は、直前の曲線コマンドの<em>終端制御点</em>が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、<em>制御点</em>は曲線の開始位置(<em>現在座標</em>)と同一となります。後続する任意個の座標の組は、暗黙的に絶対座標での滑らかな2次ベジエ曲線(<code>T</code>)コマンドへのパラメータと解釈されます。</p> + + <dl> + <dt>形式:</dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</dd> + </dl> + </td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td> + <p><em>開始位置</em>から、<em>現在位置</em>からのx-軸方向への<code>dx</code>,y-軸方向への<code>dy</code>への並進で表される<em>終端位置</em>までの滑らかな3次ベジエ曲線を描きます。<em>制御点</em>は、直前の曲線コマンドの<em>制御点</em>が反映されます。もし直前のコマンドが2次ベジエ曲線でない場合は、<em>制御点</em>は曲線の開始位置(<em>現在座標</em>)と同一となります。後続する任意個の座標の組は、暗黙的に相対座標での滑らかな2次ベジエ曲線 (<code>t</code>) コマンドへのパラメータと解釈されます。</p> + + <dl> + <dt>形式:</dt> + <dd>P<sub>o</sub>′ = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples_4" name="Examples_4">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Quadratic_Bezier_Curve', '100%', 200)}}</p> + +<h3 id="Elliptical_Arc_Curve" name="Elliptical_Arc_Curve">楕円円弧曲線</h3> + +<p><em>楕円円弧曲線</em>は楕円の一部として定義される曲線です。ベジエ曲線よりも楕円円弧曲線を用いるほうが、高度な正則曲線の描画が容易になることが多くあります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">A</th> + <td>(<code>rx</code> <code>ry</code> <code>角度</code> <code>大円弧フラグ</code> <code>掃引フラグ</code> <code>x</code> <code>y</code>)+</td> + <td> + <p>現在位置から<code>x</code>,<code>y</code>座標へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:</p> + + <ul> + <li><code>rx</code>と<code>ry</code>は楕円の半径です;</li> + <li><code>角度</code>はx-軸に対する楕円の角度（度単位）です;</li> + <li><code>大円弧フラグ</code>と<code>掃引フラグ</code>は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 + <ul> + <li><code>大円弧フラグ</code>では大きい円弧 (<strong>1</strong>) を描くか、小さい円弧 (<strong>0</strong>) を描くかを選択し,</li> + <li><code>掃引フラグ</code>では時計回りの円弧 (<strong>1</strong>) を描くか、反時計周りの円弧 (<strong>0</strong>) を描くかを選択します。</li> + </ul> + </li> + </ul> + 座標 <code>x</code>,<code>y</code> は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に絶対座標での円弧曲線 (<code>A</code>) コマンドに対するものと解釈されます。</td> + </tr> + <tr> + <th scope="row">a</th> + <td>(<code>rx</code> <code>ry</code> <code>角度</code> <code>大円弧フラグflag</code> <code>掃引フラグ</code> <code>dx</code> <code>dy</code>)+</td> + <td> + <p>現在位置から、現在位置からのx-軸方向への<code>dx</code>とy-軸方向への<code>dy</code>への並進で指定される点へ円弧を描きます。楕円の中心はコマンドへの他のパラメータに基づいて自動的に決定されます。:</p> + + <ul> + <li><code>rx</code>と<code>ry</code>は楕円の半径です;</li> + <li><code>角度</code>はx-軸に対する楕円の角度（度単位）です;</li> + <li><code>大円弧フラグ</code>と<code>掃引フラグ</code>は、他のパラメータによって描画可能な4つの可能な円弧のうち、どの円弧を描くかを選択可能にします。 + <ul> + <li><code>大円弧フラグ</code>では大きい円弧 (<strong>1</strong>) を描くか、小さい円弧 (<strong>0</strong>) を描くかを選択し,</li> + <li><code>掃引フラグ</code>では時計回りの円弧 (<strong>1</strong>) を描くか、反時計周りの円弧 (<strong>0</strong>) を描くかを選択します。</li> + </ul> + </li> + </ul> + <code>dx</code>と<code>dy</code>で並進された座標<code>X</code>,<code>Y</code>は、次のコマンドに対する新しい現在位置となります。すべての後続するパラメータの組は、暗黙的に相対座標での円弧曲線 (<code>a</code>) コマンドに対するものと解釈されます。</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_5" name="Examples_5">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p> + +<h3 id="ClosePath" name="ClosePath">ClosePath</h3> + +<p><em>ClosePath</em>は、<em>現在位置</em>からパスの開始位置までの直線描画を指定します。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">コマンド</th> + <th scope="col">パラメータ</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">Z, z</th> + <td></td> + <td>パスの最終位置とその初期位置とを接続することで、現在のサブパスを閉じます。もし、2つの点が異なる座標の場合は、2点間に直線が描かれます。</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>ノート:</strong><em>ClosePath</em>によって生じる形状は、他のコマンドを用いて初期位置へ線を描いて閉じた場合とは異なる場合があります。これは、描線の終端が互いに接続されるためです ({{SVGAttr('stroke-linejoin')}} 設定)を参照のこと。 単に同じ座標に配置されるわけではありません。</p> + +<h4 id="Examples_6" name="Examples_6">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td><code><path></code>の定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><glyph></code>と<code><missing-glyph></code>の初期定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td><code><path></code>の初期定義</td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>dx</code> 属性は、要素またはその中身の位置についての、x 軸に沿ったずれを表します。まさしくずらされるものは、この属性が設定される要素によります。</p> + +<p>{{SVGElement("feOffset")}} 要素の場合は、入力グラフィックをずらす量を表す <a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> です。この量は、 {{SVGElement("filter")}} 要素上に {{SVGAttr("primitiveUnits")}} 属性で確立した座標系で表されます。</p> + +<p>{{SVGElement("glyphRef")}} 要素の場合は, このグリフについてのフォント座標系内での相対的 X 座標を表す <a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> です。</p> + +<p>{{SVGElement("text")}} 要素、 {{SVGElement("tspan")}} 要素、 {{SVGElement("tref")}} 要素、{{SVGElement("altGlyph")}} 要素の場合は、<a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-length></a> を受け取るせいで、物事が少し複雑になります。</p> + +<p>一つの <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> が与えられた場合、この値は、この要素またはその子孫のうちのいずれかの内部における最初の文字についての現在テキスト位置の新たな相対的 X 座標です。 現在テキスト位置は 、最初の文字が描画される前に、現在のユーザ座標系の x 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> + <br> + カンマまたはスペースで区切られた n 個の <a href="/en-US/docs/Web/SVG/Content_type#Length"><length> </a>のリストが与えられた場合、これらの値は、この要素またはその子孫のうちのいずれかの内部における最初の n 文字についての現在テキスト位置の、x 軸に沿ったインクリメンタルなずれを表します。よって、現在の {{SVGElement("text")}} 要素内部の文字を描いた結果として得られる現在テキスト位置が、現在のユーザ座標系の X 軸に沿って、 <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> だけずらされます。<br> + <br> + <a href="/en-US/docs/Web/SVG/Content_type#Length"><length></a> よりも多数の文字が存在する場合は、これらの余分な文字の各々について、以下のようにします。</p> + +<ul> + <li>先祖の {{SVGElement("text")}} 要素または {{SVGElement("tspan")}} 要素が、その与えられた文字について、 <code>dx</code> 属性を通じて相対 X 座標を指定している場合には、その量の分だけ、現在のユーザ座標系の x 軸に沿って、現在テキスト位置がずらされます (もっとも近い先祖が優先されます)。</li> + <li>それ以外の場合は、x 軸に沿った更なるずれは起こりません。</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a> | <a href="/en-US/docs/Web/SVG/Content_type#List-of-<var>T<.2Fvar>s"><list-of-length></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetDxAttribute">SVG 1.1 (2nd Edition): feOffset element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TextElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): text element</a><br> + <a href="http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute" rel="external">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<h2 id="Elements">Elements</h2> + +<p>以下の要素が <code>dx</code> 属性を使えます。</p> + +<ul> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>end</code></strong> 属性は、アクティブな期間を制限できるアニメーションの終了値を定義します。</p> + +<p>5つの要素がこの属性を使用しています。 {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("set")}} です。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">既定値</th> + <td><em>なし</em></td> + </tr> + <tr> + <th scope="row">値</th> + <td><code><end-value-list></code></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>不可</td> + </tr> + </tbody> +</table> + +<p><code><end-value-list></code> は値のセミコロン区切りのリストです。それぞれの値は以下のうちの1つです。</p> + +<dl> + <dt><code><offset-value></code></dt> + <dd>この値は時点を表す <a href="/ja/docs/Web/SVG/Content_type#Clock-value">clock-value</a> を、 SVG 文書の始まり (通常は {{domxref("SVGElement/load_event", "load")}} または {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベント) からの相対で定義します。負の数も有効です。</dd> + <dt><code><syncbase-value></code></dt> + <dd>この値は <em>syncbase</em> と、任意でその <em>syncbase</em> からのオフセットを定義します。要素のアニメーションの終了時刻は、他のアニメーションの開始またはアクティブ状態の終了からの相対で定義します。</dd> + <dd>有効な syncbase-value は、他のアニメーション要素への ID による参照にドット、そして <code>begin</code> または <code>end</code> が続き、参照先のアニメーション要素の開始とアクティブ状態の終了のどちらと同期するかを識別します。 <code><offset-value></code> で定義される任意のオフセット値を追加することができます。</dd> + <dt><code><event-value></code></dt> + <dd>この値はイベントと任意のオフセットで定義し、要素のアニメーションが終了する時刻を特定します。アニメーションの終了時刻は、指定されたイベントが発生した時刻からの相対で定義します。</dd> + <dd>有効な 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")}} です。 <code><offset-value></code> で定義される任意のオフセット値を追加することができます。</dd> + <dt><code><repeat-value></code></dt> + <dd>この値は修飾された repeat イベントを定義します。この要素のアニメーション終了時刻は指定された回数の repeat イベントが発生したときからの相対で定義されます。</dd> + <dd>有効な event-value は、要素 ID の後にドットと <code>repeat()</code> 関数に繰り返し回数を指定する整数値を引数として指定したものです。 <code><offset-value></code> で定義される任意のオフセット値を追加することができます。</dd> + <dt><code><accessKey-value></code></dt> + <dd>この値はアニメーションの終了のきっかけとなるアクセスキーを定義します。要素のアニメーションはユーザーが指定されたキーを押したときに終了します。</dd> + <dd>有効な accessKey-value は、 <code>accessKey()</code> 関数に入力される文字を引数として渡したものです。 <code><offset-value></code> で定義される任意のオフセット値を追加することができます。</dd> + <dt><code><wallclock-sync-value></code></dt> + <dd>この値はアニメーションの終了時刻を現実世界の時刻で定義します。</dd> + <dd>有効な wallclock-sync-value は <code>wallclock()</code> 関数に時刻を引数として渡したものです。時刻の構文は <a href="https://www.iso.org/iso-8601-date-and-time-format.html">ISO 8601</a> で定義された構文に基づいたものです。</dd> + <dt><code>indefinite</code></dt> + <dd>アニメーションの終了は、 {{domxref("SVGAnimationElement.endElement()")}} メソッド呼び出しで指定されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Offset_example" name="Offset_example">オフセットの例</h3> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('Offset_example', '100%', 130)}}</p> + +<h3 id="Event_example" name="Event_example">イベントの例</h3> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('Event_example', '100%', 130)}}</p> + +<h3 id="Accesskey_example" name="Accesskey_example">アクセスキーの例</h3> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('Accesskey_example', '100%', 130)}}</p> + +<p><em>この例は iFrame に埋め込まれています。キーイベントを有効化したい場合は、まずクリックする必要があります。</em></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#EndAttribute", "end")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#EndAttribute", "end")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>fill-opacity</code></strong>属性は、図形に適用されるペイントサーバー(<em>色</em>, <em>勾配</em>, <em>パターン</em>, 等)の不透明度を定義するプレゼンテーション属性です。</p> + +<p class="note"><strong>注:</strong>プレゼンテーション属性としての<code>fill-opacity</code>CSSプロパティに適用できます。</p> + +<p>プレゼンテーション属性として、任意の要素に適用可能ですが、次の11個の要素のみで効果があります: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">規定値</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong> SVG2では、<code>fill-opacity</code>への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(<em>以下の<a href="#Browser_Compatibility">ブラウザ実装状況</a>を参照</em>)。最良の実装としては、不透明度を<code>[0-1]</code>の範囲の値として指定することです。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("svg.attributes.presentation.fill-opacity")}}</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>図形とテキスト向けの定義</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>図形とテキスト向けの初期定義</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>fill</code></strong> 属性には使われ方により2つの意味があります. 1つは図形やテキストに使われた場合で，その要素を塗りつぶす色を意味します．もう1つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．</p> + +<p>呈示属性(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')}}.</p> + +<p>アニメーションとしては次の5つの要素で使われています: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, and {{SVGElement('set')}}.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="altGlyph">altGlyph</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('altGlyph')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('altGlyph')}}, <code>fill</code> is a presentation attribute that defines the color of the glyph.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="animate">animate</h2> + +<p>For {{SVGElement('animate')}}, <code>fill</code> defines the final state of the animation.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>freeze</code> (<em>Keep the state of the last animation frame</em>) | <code>remove</code> (<em>Keep the state of the first animation frame</em>)</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h2 id="animateColor">animateColor</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG Animation 2 {{SVGElement('animateColor')}} is deprecated and shouldn't be used. Use {{SVGElement('animate')}} instead.</p> + +<p>For {{SVGElement('animateColor')}}, <code>fill</code> defines the final state of the animation.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>freeze</code> (<em>Keep the state of the last animation frame</em>) | <code>remove</code> (<em>Keep the state of the first animation frame</em>)</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h2 id="animateMotion">animateMotion</h2> + +<p>For {{SVGElement('animateMotion')}}, <code>fill</code> defines the final state of the animation.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>freeze</code> (<em>Keep the state of the last animation frame</em>) | <code>remove</code> (<em>Keep the state of the first animation frame</em>)</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h2 id="animateTransform">animateTransform</h2> + +<p>For {{SVGElement('animateTransform')}}, <code>fill</code> defines the final state of the animation.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>freeze</code> (<em>Keep the state of the last animation frame</em>) | <code>remove</code> (<em>Keep the state of the first animation frame</em>)</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h2 id="circle">circle</h2> + +<p>For {{SVGElement('circle')}}, <code>fill</code> is a presentation attribute that defines the color of the circle.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="ellipse">ellipse</h2> + +<p>For {{SVGElement('ellipse')}}, <code>fill</code> is a presentation attribute that defines the color of the ellipse.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="path">path</h2> + +<p>For {{SVGElement('path')}}, <code>fill</code> is a presentation attribute that defines the color of the interior of the shape. (<em>Interior is define by the {{SVGAttr('fill-rule')}} attribute</em>)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="polygon">polygon</h2> + +<p>For {{SVGElement('polygon')}}, <code>fill</code> is a presentation attribute that defines the color of the interior of the shape. (<em>Interior is define by the {{SVGAttr('fill-rule')}} attribute</em>)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="polyline">polyline</h2> + +<p>For {{SVGElement('polyline')}}, <code>fill</code> is a presentation attribute that defines tthe color of the interior of the shape. (<em>Interior is define by the {{SVGAttr('fill-rule')}} attribute</em>)</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="rect">rect</h2> + +<p>For {{SVGElement('rect')}}, <code>fill</code> is a presentation attribute that defines the color of the rectangle.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="set">set</h2> + +<p>For {{SVGElement('set')}}, <code>fill</code> defines the final state of the animation.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>freeze</code> (<em>Keep the state of the last animation frame</em>) | <code>remove</code> (<em>Keep the state of the first animation frame</em>)</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h2 id="text">text</h2> + +<p>For {{SVGElement('text')}}, <code>fill</code> is a presentation attribute that defines what the color of the text.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="textPath">textPath</h2> + +<p>For {{SVGElement('textPath')}}, <code>fill</code> is a presentation attribute that defines the color of the text.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="tref">tref</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('tref')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('tref')}}, <code>fill</code> is a presentation attribute that defines the color of the text.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="tspan">tspan</h2> + +<p>For {{SVGElement('tspan')}}, <code>fill</code> is a presentation attribute that defines the color of the text.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>fill</code> can be used as a CSS property.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Definition for animations</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts.<br> + Adds <code style="white-space: nowrap;">context-fill</code> and <code style="white-space: nowrap;">context-stroke</code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for animations</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.fill")}}</p> + +<p class="note"><strong>Note:</strong> For information on using the <code style="white-space: nowrap;">context-fill</code> (and <code style="white-space: nowrap;">context-stroke</code>) values from HTML documents, see the documentation for the non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span> property.</p> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>filterUnits</code>属性は、 {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} そして {{ SVGAttr("height") }} の座標系を定義します。</p> + +<p>もし<code>filterUnits</code>属性が指定されていない場合、<code>objectBoundingBox</code>が指定されているのと同じになります。</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterElementFilterUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>{{ 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).</dd> + <dt>objectBoundingBox</dt> + <dd>In that case, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent fractions or percentages of the bounding box on the referencing element.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>filterUnits</code> attribute:</p> + +<ul> + <li>{{ SVGElement("filter") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>href</code></strong> attribute defines a link to a resource as a reference <a href="/en-US/docs/Web/SVG/Content_type#URL">URL</a>. The exact meaning of that link depends on the context of each element using it.</p> + +<div class="note"> +<p><strong>Note:</strong> Specifications before SVG 2 defined an {{SVGAttr("xlink:href")}} attribute, which is now rendered obsolete by the <code>href</code> attribute.</p> +</div> + +<p>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")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[2]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "320", "100")}}</p> +</div> + +<h2 id="In_SVG">In SVG</h2> + +<h3 id="a">a</h3> + +<p>For {{SVGElement("a")}}, <code>href</code> defines the location of the referenced object, expressed as a URL reference.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="animate_animateMotion_animateTransform_set">animate, animateMotion, animateTransform, set</h3> + +<p>For the {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, and {{SVGElement("set")}}, <code>href</code> defines a URL referring to the element which is the target of this animation element and which therefore will be modified over time.</p> + +<p>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.</p> + +<p>If the <code>href</code> 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 <code>xlink:href</code> and <code>href</code> are specified, the value of the latter attribute is used.</p> + +<p>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.</p> + +<p>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 <a href="https://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">SMIL Animation: Specifying the animation target</a>.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h3 id="discard">discard</h3> + +<p>For {{SVGElement("discard")}}, <code>href</code> defines a URL referring the target element to discard. See the <a href="#href_on_animation_elements">definition of <code>href</code> on animation elements</a> for details on identifying a target element.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Unlike other animation elements, the <code><discard></code> element does not support the deprecated {{SVGAttr("xlink:href")}} attribute.</p> +</div> + +<p>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.</p> + +<p>If the <code>href</code> attribute is not provided, then the target element will be the immediate parent element of the <code><discard></code> element.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h3 id="feImage">feImage</h3> + +<p>For {{SVGElement("feImage")}}, <code>href</code> defines a URL referring to an image resource or to an element. If both, the {{SVGAttr("xlink:href")}} and the <code>href</code> attribute are specified, the latter overrides the former.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="image">image</h3> + +<p>For {{SVGElement("image")}}, <code>href</code> defines a URL referring to the image to render.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h4 id="Example">Example</h4> + +<div id="imageExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("imageExample", 200, 250)}}</p> +</div> + +<h3 id="linearGradient">linearGradient</h3> + +<p>For {{SVGElement("linearGradient")}}, <code>href</code> defines URL referring to a template gradient element; to be valid, the reference must be to a different <code><linearGradient></code> or {{SVGElement("radialGradient")}} element.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="mpath">mpath</h3> + +<p>For {{SVGElement("mpath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> which defines the motion path.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h3 id="pattern">pattern</h3> + +<p>For {{SVGElement("pattern")}}, <code>href</code> defines a URL referring to a different <code><pattern></code> 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 <code>href</code> 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 <code>href</code> attribute, then the current element can inherit those attributes or children. On the {{SVGElement("pattern")}} element, the <code>href</code> attribute is animatable.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="radialGradient">radialGradient</h3> + +<p>For {{SVGElement("radialGradient")}}, <code>href</code> defines URL referring to a template gradient element; to be valid, the reference must be to a different {{SVGElement("linearGradient")}} or <code><radialGradient></code> element.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="script">script</h3> + +<p>For {{SVGElement("script")}}, <code>href</code> defines a URL referring to an external resource containing the script code.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<h3 id="textPath">textPath</h3> + +<p>For {{SVGElement("textPath")}}, <code>href</code> defines a URL referring to the {{SVGElement("path")}} element or <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">basic shape</a> onto which the text will be rendered if no {{SVGAttr("path")}} attribute is provided. On the {{SVGElement("textPath")}} element, the <code>href</code> attribute is animatable.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="use">use</h3> + +<p>For {{SVGElement("use")}}, <code>href</code> defines a URL referring to an element or fragment within an SVG document to be cloned.</p> + +<p>The <code><use></code> element can reference an entire SVG document by specifying an <code>href</code> value without a fragment. Such references are taken to be referring to the root element of the referenced document.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#URL"><url></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "linking.html#AElementHrefAttribute", "href for <a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("a")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG Animations 2", "#HrefAttribute", "href for <animate>, <animateMotion>, <animateTransform>, and <set>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Defines <code>href</code> for animation elements.</td> + </tr> + <tr> + <td>{{SpecName("SVG Animations 2", "#DiscardElementHrefAttribute", "href for <discard>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("discard")}} element.</td> + </tr> + <tr> + <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-href", "href for <feImage>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("feImage")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "embedded.html#ImageElementHrefAttribute", "href for <image>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("image")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#LinearGradientElementHrefAttribute", "href for <linearGradient>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("linearGradient")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG Animations 2", "#MPathElementHrefAttribute", "href for <mpath>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("mpath")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#PatternElementHrefAttribute", "href for <pattern>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("pattern")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementHrefAttribute", "href for <radialGradient>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("radialGradient")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "interact.html#ScriptElementHrefAttribute", "href for <script>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("script")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "text.html#TextPathElementHrefAttribute", "href for <textPath>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("textPath")}} element.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "struct.html#UseElementHrefAttribute", "href for <use>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines <code>href</code> for the {{SVGElement("use")}} element.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.href")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>id</code></strong> 属性は要素に固有の名前を割り当てます。</p> + +<p>すべての要素がこの属性を使用します。</p> + +<div id="topExample"> +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td><id></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +<dl> + <dt><id></dt> + <dd> + <p>要素の ID を指定します。 ID はノードツリー内で固有でなければならず、空文字列であってはならず、ホワイトスペース文字を含んではなりません。</p> + + <div class="blockIndicator note"> + <p><strong>注:</strong> URL の対象フラグメントとして使用されるときに <code>id</code> の値に SVG view 仕様書として解釈される値 (例えば <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) や、基本メディアフラグメントを使用しないでください。</p> + </div> + + <p>XML 文書内で妥当でなければなりません。独立した SVG 文書は XML 1.0 の構文を使用しており、有効な ID は指定された文字 (文字、数字、いくつかの句読点) のみを含み、数字、フルストップ (.) 文字、ハイフンマイナス (-) 文字で始まらないことを指定しています。</p> + </dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Defines the allowed values in more detail.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.attributes.style.class")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li> + <li>{{SVGAttr("class")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p class="summary"><span class="seoSummary">SVG 要素は、要素の扱いや描画の詳細を指定する属性を使って変更できます。以下は、すべての SVG 属性のリストです。各属性のリンク先のドキュメンテーションでは、どの要素が属性をサポートしているか、どのように動作するかを学ぶことができます。</span></p> + +<h2 id="SVG_attributes_A_to_Z" name="SVG_attributes_A_to_Z">SVG 属性 A to Z</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGAttr("accent-height")}}</li> + <li>{{SVGAttr("accumulate")}}</li> + <li>{{SVGAttr("additive")}}</li> + <li>{{SVGAttr("alignment-baseline")}}</li> + <li>{{SVGAttr("allowReorder")}}</li> + <li>{{SVGAttr("alphabetic")}}</li> + <li>{{SVGAttr("amplitude")}}</li> + <li>{{SVGAttr("arabic-form")}}</li> + <li>{{SVGAttr("ascent")}}</li> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("autoReverse")}}</li> + <li>{{SVGAttr("azimuth")}}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{SVGAttr("baseFrequency")}}</li> + <li>{{SVGAttr("baseline-shift")}}</li> + <li>{{SVGAttr("baseProfile")}}</li> + <li>{{SVGAttr("bbox")}}</li> + <li>{{SVGAttr("begin")}}</li> + <li>{{SVGAttr("bias")}}</li> + <li>{{SVGAttr("by")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGAttr("calcMode")}}</li> + <li>{{SVGAttr("cap-height")}}</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("clip")}}</li> + <li>{{SVGAttr("clipPathUnits")}}</li> + <li>{{SVGAttr("clip-path")}}</li> + <li>{{SVGAttr("clip-rule")}}</li> + <li>{{SVGAttr("color")}}</li> + <li>{{SVGAttr("color-interpolation")}}</li> + <li>{{SVGAttr("color-interpolation-filters")}}</li> + <li>{{SVGAttr("color-profile")}}</li> + <li>{{SVGAttr("color-rendering")}}</li> + <li>{{SVGAttr("contentScriptType")}}</li> + <li>{{SVGAttr("contentStyleType")}}</li> + <li>{{SVGAttr("cursor")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("decelerate")}}</li> + <li>{{SVGAttr("descent")}}</li> + <li>{{SVGAttr("diffuseConstant")}}</li> + <li>{{SVGAttr("direction")}}</li> + <li>{{SVGAttr("display")}}</li> + <li>{{SVGAttr("divisor")}}</li> + <li>{{SVGAttr("dominant-baseline")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGAttr("edgeMode")}}</li> + <li>{{SVGAttr("elevation")}}</li> + <li>{{SVGAttr("enable-background")}}</li> + <li>{{SVGAttr("end")}}</li> + <li>{{SVGAttr("exponent")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGAttr("fill")}}</li> + <li>{{SVGAttr("fill-opacity")}}</li> + <li>{{SVGAttr("fill-rule")}}</li> + <li>{{SVGAttr("filter")}}</li> + <li>{{SVGAttr("filterRes")}}</li> + <li>{{SVGAttr("filterUnits")}}</li> + <li>{{SVGAttr("flood-color")}}</li> + <li>{{SVGAttr("flood-opacity")}}</li> + <li>{{SVGAttr("font-family")}}</li> + <li>{{SVGAttr("font-size")}}</li> + <li>{{SVGAttr("font-size-adjust")}}</li> + <li>{{SVGAttr("font-stretch")}}</li> + <li>{{SVGAttr("font-style")}}</li> + <li>{{SVGAttr("font-variant")}}</li> + <li>{{SVGAttr("font-weight")}}</li> + <li>{{SVGAttr("format")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGAttr("g1")}}</li> + <li>{{SVGAttr("g2")}}</li> + <li>{{SVGAttr("glyph-name")}}</li> + <li>{{SVGAttr("glyph-orientation-horizontal")}}</li> + <li>{{SVGAttr("glyph-orientation-vertical")}}</li> + <li>{{SVGAttr("glyphRef")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("gradientUnits")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGAttr("hanging")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("href")}}</li> + <li>{{SVGAttr("hreflang")}}</li> + <li>{{SVGAttr("horiz-adv-x")}}</li> + <li>{{SVGAttr("horiz-origin-x")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGAttr("id")}}</li> + <li>{{SVGAttr("ideographic")}}</li> + <li>{{SVGAttr("image-rendering")}}</li> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("in2")}}</li> + <li>{{SVGAttr("intercept")}}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{SVGAttr("k")}}</li> + <li>{{SVGAttr("k1")}}</li> + <li>{{SVGAttr("k2")}}</li> + <li>{{SVGAttr("k3")}}</li> + <li>{{SVGAttr("k4")}}</li> + <li>{{SVGAttr("kernelMatrix")}}</li> + <li>{{SVGAttr("kernelUnitLength")}}</li> + <li>{{SVGAttr("kerning")}}</li> + <li>{{SVGAttr("keyPoints")}}</li> + <li>{{SVGAttr("keySplines")}}</li> + <li>{{SVGAttr("keyTimes")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGAttr("lang")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> + <li>{{SVGAttr("letter-spacing")}}</li> + <li>{{SVGAttr("lighting-color")}}</li> + <li>{{SVGAttr("limitingConeAngle")}}</li> + <li>{{SVGAttr("local")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGAttr("marker-end")}}</li> + <li>{{SVGAttr("marker-mid")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("markerHeight")}}</li> + <li>{{SVGAttr("markerUnits")}}</li> + <li>{{SVGAttr("markerWidth")}}</li> + <li>{{SVGAttr("mask")}}</li> + <li>{{SVGAttr("maskContentUnits")}}</li> + <li>{{SVGAttr("maskUnits")}}</li> + <li>{{SVGAttr("mathematical")}}</li> + <li>{{SVGAttr("max")}}</li> + <li>{{SVGAttr("media")}}</li> + <li>{{SVGAttr("method")}}</li> + <li>{{SVGAttr("min")}}</li> + <li>{{SVGAttr("mode")}}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{SVGAttr("name")}}</li> + <li>{{SVGAttr("numOctaves")}}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{SVGAttr("offset")}}</li> + <li>{{SVGAttr("opacity")}}</li> + <li>{{SVGAttr("operator")}}</li> + <li>{{SVGAttr("order")}}</li> + <li>{{SVGAttr("orient")}}</li> + <li>{{SVGAttr("orientation")}}</li> + <li>{{SVGAttr("origin")}}</li> + <li>{{SVGAttr("overflow")}}</li> + <li>{{SVGAttr("overline-position")}}</li> + <li>{{SVGAttr("overline-thickness")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGAttr("panose-1")}}</li> + <li>{{SVGAttr("paint-order")}}</li> + <li>{{SVGAttr("path")}}</li> + <li>{{SVGAttr("pathLength")}}</li> + <li>{{SVGAttr("patternContentUnits")}}</li> + <li>{{SVGAttr("patternTransform")}}</li> + <li>{{SVGAttr("patternUnits")}}</li> + <li>{{SVGAttr("ping")}}</li> + <li>{{SVGAttr("pointer-events")}}</li> + <li>{{SVGAttr("points")}}</li> + <li>{{SVGAttr("pointsAtX")}}</li> + <li>{{SVGAttr("pointsAtY")}}</li> + <li>{{SVGAttr("pointsAtZ")}}</li> + <li>{{SVGAttr("preserveAlpha")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("primitiveUnits")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("radius")}}</li> + <li>{{SVGAttr("referrerPolicy")}}</li> + <li>{{SVGAttr("refX")}}</li> + <li>{{SVGAttr("refY")}}</li> + <li>{{SVGAttr("rel")}}</li> + <li>{{SVGAttr("rendering-intent")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> + <li>{{SVGAttr("repeatDur")}}</li> + <li>{{SVGAttr("requiredExtensions")}}</li> + <li>{{SVGAttr("requiredFeatures")}}</li> + <li>{{SVGAttr("restart")}}</li> + <li>{{SVGAttr("result")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("rx")}}</li> + <li>{{SVGAttr("ry")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGAttr("scale")}}</li> + <li>{{SVGAttr("seed")}}</li> + <li>{{SVGAttr("shape-rendering")}}</li> + <li>{{SVGAttr("slope")}}</li> + <li>{{SVGAttr("spacing")}}</li> + <li>{{SVGAttr("specularConstant")}}</li> + <li>{{SVGAttr("specularExponent")}}</li> + <li>{{SVGAttr("speed")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("startOffset")}}</li> + <li>{{SVGAttr("stdDeviation")}}</li> + <li>{{SVGAttr("stemh")}}</li> + <li>{{SVGAttr("stemv")}}</li> + <li>{{SVGAttr("stitchTiles")}}</li> + <li>{{SVGAttr("stop-color")}}</li> + <li>{{SVGAttr("stop-opacity")}}</li> + <li>{{SVGAttr("strikethrough-position")}}</li> + <li>{{SVGAttr("strikethrough-thickness")}}</li> + <li>{{SVGAttr("string")}}</li> + <li>{{SVGAttr("stroke")}}</li> + <li>{{SVGAttr("stroke-dasharray")}}</li> + <li>{{SVGAttr("stroke-dashoffset")}}</li> + <li>{{SVGAttr("stroke-linecap")}}</li> + <li>{{SVGAttr("stroke-linejoin")}}</li> + <li>{{SVGAttr("stroke-miterlimit")}}</li> + <li>{{SVGAttr("stroke-opacity")}}</li> + <li>{{SVGAttr("stroke-width")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("surfaceScale")}}</li> + <li>{{SVGAttr("systemLanguage")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGAttr("tabindex")}}</li> + <li>{{SVGAttr("tableValues")}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{SVGAttr("targetX")}}</li> + <li>{{SVGAttr("targetY")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("text-decoration")}}</li> + <li>{{SVGAttr("text-rendering")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("transform")}}</li> + <li>{{SVGAttr("transform-origin")}}</li> + <li>{{SVGAttr("type")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGAttr("u1")}}</li> + <li>{{SVGAttr("u2")}}</li> + <li>{{SVGAttr("underline-position")}}</li> + <li>{{SVGAttr("underline-thickness")}}</li> + <li>{{SVGAttr("unicode")}}</li> + <li>{{SVGAttr("unicode-bidi")}}</li> + <li>{{SVGAttr("unicode-range")}}</li> + <li>{{SVGAttr("units-per-em")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGAttr("v-alphabetic")}}</li> + <li>{{SVGAttr("v-hanging")}}</li> + <li>{{SVGAttr("v-ideographic")}}</li> + <li>{{SVGAttr("v-mathematical")}}</li> + <li>{{SVGAttr("values")}}</li> + <li>{{SVGAttr("vector-effect")}}</li> + <li>{{SVGAttr("version")}}</li> + <li>{{SVGAttr("vert-adv-y")}}</li> + <li>{{SVGAttr("vert-origin-x")}}</li> + <li>{{SVGAttr("vert-origin-y")}}</li> + <li>{{SVGAttr("viewBox")}}</li> + <li>{{SVGAttr("viewTarget")}}</li> + <li>{{SVGAttr("visibility")}}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("widths")}}</li> + <li>{{SVGAttr("word-spacing")}}</li> + <li>{{SVGAttr("writing-mode")}}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("x-height")}}</li> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("xChannelSelector")}}</li> + <li>{{SVGAttr("xlink:actuate")}}</li> + <li>{{SVGAttr("xlink:arcrole")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("xlink:role")}}</li> + <li>{{SVGAttr("xlink:show")}}</li> + <li>{{SVGAttr("xlink:title")}}</li> + <li>{{SVGAttr("xlink:type")}}</li> + <li>{{SVGAttr("xml:base")}}</li> + <li>{{SVGAttr("xml:lang")}}</li> + <li>{{SVGAttr("xml:space")}}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("y2")}}</li> + <li>{{SVGAttr("yChannelSelector")}}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{SVGAttr("z")}}</li> + <li>{{SVGAttr("zoomAndPan")}}</li> +</ul> +</div> + +<h2 id="SVG_attributes_by_category" name="SVG_attributes_by_category">カテゴリ別の SVG 属性</h2> + +<h3 id="Generic_attributes" name="Generic_attributes">ジェネリック属性</h3> + +<h4 id="Core_attributes" name="Core_attributes"><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></h4> + +<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p> + +<h4 id="Style_attributes" name="Style_attributes"><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></h4> + +<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p> + +<h4 id="Conditional_processing_attributes" name="Conditional_processing_attributes">条件処理属性</h4> + +<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p> + +<h3 id="XLink_attributes" name="XLink_attributes">XLink 属性</h3> + +<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p> + +<h3 id="Presentation_attributes" name="Presentation_attributes"><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></h3> + +<div class="note">すべての SVG プレゼンテーション属性が CSS プロパティとして使用できます。</div> + +<p>{{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")}}</p> + +<h3 id="Filters_attributes" name="Filters_attributes">フィルター属性</h3> + +<h4 id="Filter_primitive_attributes" name="Filter_primitive_attributes">フィルタープリミティブ属性</h4> + +<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p> + +<h4 id="Transfer_function_attributes" name="Transfer_function_attributes">変換関数属性</h4> + +<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p> + +<h3 id="Animation_attributes" name="Animation_attributes">アニメーション属性</h3> + +<h4 id="Animation_target_element_attributes" name="Animation_target_element_attributes">アニメーション対象要素属性</h4> + +<p>{{SVGAttr("href")}}</p> + +<h4 id="Animation_attribute_target_attributes" name="Animation_attribute_target_attributes">アニメーション属性に対する属性</h4> + +<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p> + +<h4 id="Animation_timing_attributes" name="Animation_timing_attributes">アニメーションタイミング属性</h4> + +<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p> + +<h4 id="Animation_value_attributes" name="Animation_value_attributes">アニメーション値属性</h4> + +<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p> + +<h4 id="Animation_addition_attributes" name="Animation_addition_attributes">アニメーション付加属性</h4> + +<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p> + +<h3 id="Event_attributes" name="Event_attributes">イベント属性</h3> + +<h4 id="Animation_event_attributes" name="Animation_event_attributes"><a href="/ja/docs/Web/SVG/Attribute/Events#Animation_event_attributes">アニメーションイベント属性</a></h4> + +<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p> + +<h4 id="Document_event_attributes" name="Document_event_attributes"><a href="/ja/docs/Web/SVG/Attribute/Events#Document_event_attributes">文書イベント属性</a></h4> + +<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p> + +<h4 id="Global_event_attributes" name="Global_event_attributes"><a href="/ja/docs/Web/SVG/Attribute/Events#Global_event_attributes">グローバルイベント属性</a></h4> + +<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p> + +<h4 id="Graphical_event_attributes" name="Graphical_event_attributes"><a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_event_attributes">グラフィカルイベント属性</a></h4> + +<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/SVG/Element">SVG 要素リファレンス</a></li> + <li><a href="/ja/docs/Web/SVG/Tutorial">SVG チュートリアル</a></li> + <li><a href="/ja/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG インターフェイスリファレンス</a></li> +</ul> 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 +--- +<p><span class="seoSummary">SVG の <code><text></code><strong> </strong>要素または <code><tspan> </code>要素が特定の長さを有している場合、それは <code>textLength</code> 属性を使って設定したものである訳ですが、<code>lengthAdjust</code> 属性は、テキストをその長さに引き延ばすかあるいはその長さに圧縮する方法を制御します。</span></p> + +<p>この属性で可能な二つの値は、 <strong><code>spacing </code></strong>と <strong><code>spacingAndGlyphs</code></strong> です。<code>spacing </code>(デフォルト値) を使うと、文字の形が保たれる一方で、文字同士の間のスペースが伸び縮みします。<code>spacingAndGlyphs</code> を使うと、テキスト要素全体が、そのテキストの方向に沿って引き延ばされます。</p> + +<h2 id="SVG_text_fitting_using_lengthAdjust" name="SVG_text_fitting_using_lengthAdjust">lengthAdjust を用いた SVG テキストの調整</h2> + +<h3 id="HTML_の内容">HTML の内容</h3> + +<pre class="brush: 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></pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}</p> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>marker-mid</code></strong> 属性は、指定された<a href="/ja/docs/Web/SVG/Element#Shape_elements">シェイプ</a>の中間の頂点すべてに描かれる矢印やマーカーを定義します。</p> + +<p>マーカーは、<a href="/ja/docs/Web/SVG/Attribute/d#Path_commands">パスデータ</a>の最初と最後以外のすべての頂点に描画されます。</p> + +<p class="note"><strong>メモ:</strong> プレゼンテーション属性なので、 <code>marker-mid</code> は CSS プロパティとして使用することができます。</p> + +<p>プレゼンテーション属性として任意の要素に適用できますが、 {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}} の7つの要素でのみ効果があります。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; hightlight[8]"><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> +</pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">既定値</th> + <td><code>none</code> | <code><marker-ref></code></td> + </tr> + <tr> + <th scope="row">値</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>none</code></dt> + <dd>指定された頂点にマーカー記号を描画してはならないことを示します。</dd> + <dt><code><marker-ref></code></dt> + <dd>この値は {{SVGElement("marker")}} 要素への参照で、指定された頂点に描画されるものです。参照が有効でない場合は、マーカーは描画されません。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#MarkerEndProperty", "marker-mid")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>重要な変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#MarkerEndProperty", "marker-mid")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.attributes.presentation.marker-mid")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGAttr("marker-start")}}</li> + <li>{{SVGAttr("marker-end")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><code><strong>onclick</strong></code> 属性は、要素がクリックされたときに実行するスクリプトを指定します。</p> + +<p>37個の要素がこの属性を使用します。 {{SVGElement("a")}}, {{SVGElement("altGlyph")}}, {{SVGElement("animate")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}},<br> + {{SVGElement("circle")}}, {{SVGElement("defs")}}, {{SVGElement("desc")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}},<br> + {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("metadata")}}, {{SVGElement("mpath")}},<br> + {{SVGElement("path")}}, {{SVGElement("pattern")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("radialGradient")}}, {{SVGElement("rect")}},<br> + {{SVGElement("script")}}, {{SVGElement("set")}}, {{SVGElement("stop")}}, {{SVGElement("style")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}},<br> + {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("title")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}},<br> + {{SVGElement("use")}}, {{SVGElement("view")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; + margin: 0; +}</pre> +</div> + +<pre class="brush: html; highlight[2]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "220", "220")}}</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td><code><a href="/ja/docs/Web/SVG/Content_type#Anything"><anything></a></code></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><em>なし</em></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>不可</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "interact.html#EventAttributes", "onclick")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "script.html#OnClickEventAttribute", "onclick")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.attributes.events.global.onclick")}}</p> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>points</code></strong> 属性は、点のリストを定義します。各点は、ユーザー座標系におけるX座標とY座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。</p> + +<p>2つの要素がこの属性を使用しています: {{SVGElement("polyline")}}、および{{SVGElement("polygon")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="polyline">polyline</h2> + +<p>{{SVGElement('polyline')}}の場合、 <code>points</code> で定義された点リストはそれぞれが描きたい線の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。</p> + +<p class="note"><strong>Note:</strong> polyline は最初の点と最後の点が接続されない開いた図形となります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td>[ {{cssxref("number")}}+ ]#</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="Example">Example</h3> + +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p> + +<h2 id="polygon">polygon</h2> + +<p>{{SVGElement('polygon')}}の場合、<code>points</code> で定義された点リストはそれぞれが描きたい図形の頂点を表します。各点は、ユーザー座標系のX座標とY座標として定義されます。</p> + +<p class="note"><strong>Note:</strong> polygon は最初の点と最後の点が接続された閉じた図形となります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td>[ {{cssxref("number")}}+ ]#</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="Example_2">Example</h3> + +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><polygon></code></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><polyline></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><polygon></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><polyline></code></td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>r</code></strong> 属性は円の半径を定義します。</p> + +<p>二つの要素、すなわち、{{SVGElement("circle")}} と {{SVGElement("radialGradient")}} が、この属性を使っています。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>{{SVGElement('circle')}} に関しては、<code>r</code> は、円の半径を定めており、したがって、その円の大きさを定めています。ゼロ以下の値を用いると、その円はまったく描画されません。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">デフォルト値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可能か</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>注:</strong> SVG2 からは、<code>r</code> は <em>幾何属性 (Geometry Property)</em> です。これが意味することは、<code>r</code> 属性を <code>circle</code> の CSS 属性としても使える、ということです。</p> + +<h2 id="radialGradient">radialGradient</h2> + +<p>{{ SVGElement("radialGradient") }} に関しては、<code>r</code> は、放射状グラデーションの末端の円の半径を定めています。</p> + +<p>グラデーションの <strong>100%</strong> にあたるピン留め箇所 (stop) が、この末端の円の外周にマッピングされるように、グラデーションが描画されます。ゼロ以下の値を用いると、グラデーションの最後の {{ SVGElement("stop") }} の色と不透明度を使った単一の色で、当該領域を塗りつぶすことになります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">デフォルト値</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">アニメーション可能か</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#R", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition as a geometry property</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for SVG2 paint servers <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><circle></code></td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>scale</code></strong>属性は、{{SVGElement("feDisplacementMap")}}フィルタプリミティブにおいて用いられる距離の尺度因子を定義します。その量は、{{SVGElement("filter")}}要素の{{SVGAttr("primitiveUnits")}}属性で規定される座標系で表されます。</p> + +<p>1つの要素のみがこの属性を用います: {{SVGElement("feDisplacementMap")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[4,8]"><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></pre> + +<p>{{EmbedLiveSample("topExample", "480", "200")}}</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用方法</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">値</th> + <td>{{cssxref("number")}}</td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">アニメーション可否</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><number></code></dt> + <dd> + <p>この値は距離に関する尺度因子をのみを定義します。</p> + + <p>この属性の値が<code><span class="attr-value">0</span></code>の場合は、元画像に対して影響しません。</p> + </dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Filters 1.0", "#element-attrdef-fedisplacementmap-scale", "scale")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feDisplacementMapScaleAttribute", "scale")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("svg.elements.feDisplacementMap.scale")}}</p> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>stroke-dasharray</code></strong>属性は、 輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。</p> + +<p class="note"><strong>Note:</strong> プレゼンテーション属性として、<strong><code>stroke-dasharray</code></strong>属性は、CSSプロパティとして使用することができます。</p> + +<p>プレゼンテーション属性として、それはいくつかの要素に適用することができますが、つぎの12個の要素にのみ効果があります。</p> + +<div class="threecolumns"> +<ul> + <li>{{SVGElement('altGlyph')}}</li> + <li>{{SVGElement('circle')}}</li> + <li>{{SVGElement('ellipse')}}</li> + <li>{{SVGElement('path')}}</li> + <li>{{SVGElement('line')}}</li> + <li>{{SVGElement('polygon')}}</li> + <li>{{SVGElement('polyline')}}</li> + <li>{{SVGElement('rect')}}</li> + <li>{{SVGElement('text')}}</li> + <li>{{SVGElement('textPath')}}</li> + <li>{{SVGElement('tref')}}</li> + <li>{{SVGElement('tspan')}}</li> +</ul> +</div> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>none</code> | <var><dasharray></var></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<dl> + <dt><var><dasharray></var></dt> + <dd> + <p>A list of comma and/or white space separated <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><var><length></var></a>s and <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><var><percentage></var></a>s that specify the lengths of alternating dashes and gaps.</p> + + <p>If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, <code>5,3,2</code> is equivalent to <code>5,3,2,5,3,2</code>.</p> + </dd> +</dl> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>stroke-dashoffset</code></strong>属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。</p> + +<p class="note"><strong>Note:</strong> プレゼンテーション属性として、<strong><code>stroke-dashoffset</code></strong>はCSSプロパティとして使用することができます。</p> + +<p>プレゼンテーション属性として、それは、いくつかの要素に適用させることができますが、次の12個の要素にのみ効果があります。</p> + +<p> {{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')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p>The offset is usually expressed in user units resolved against the {{SVGAttr('pathLength')}} but if a <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> is used, the value is resolved as a percentage of the current viewport.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> + +<p><code>stroke-linecap</code> 要素は線を引いた時の開いている部分パスの終端の形状を指定します。</p> + +<p>プレゼンテーション属性であるため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">カテゴリ</th> + <td>プレゼンテーション属性</td> + </tr> + <tr> + <th scope="row">値</th> + <td>butt | round | square | inherit</td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">標準文書</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><?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></pre> + +<p><strong>Live sample</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="要素">要素</h2> + +<p>以下の要素で <code>stroke-linecap</code> を使うことができます</p> + +<ul> + <li><a href="/ja/docs/Web/SVG/Element#Shape" title="ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/docs/Web/SVG/Element#TextContent" title="ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li> +</ul> 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 +--- +<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/SVG/Attribute">SVG 属性リファレンスホーム</a></p> + +<p><code>stroke-linejoin</code> 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。</p> + +<p>プレゼンテーション属性のため、直接 CSS スタイルシートの中で定義したプロパティとして使うこともできます。</p> + +<p><strong>注意:</strong> <code>miter</code> オプションの最終的な見た目は <code><a href="/ja/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code> 属性の値の影響を受けます。</p> + +<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">カテゴリ</th> + <td>プレゼンテーション属性</td> + </tr> + <tr> + <th scope="row">値</th> + <td><strong title="this is the default value">miter</strong> | round | bevel | inherit</td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">標準文書</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><?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></pre> + +<p><strong>Live sample</strong></p> + +<p>{{ EmbedLiveSample('Example','120','300') }}</p> + +<h2 id="要素">要素</h2> + +<p>以下の要素で <code>stroke-linejoin</code> 属性を使うことができます</p> + +<ul> + <li><a href="/ja/SVG/Element#Shape" title="ja/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/SVG/Element#TextContent" title="ja/SVG/Element#TextContent">Text content 要素</a> »</li> +</ul> + +<p> </p> + +<h2 id="関連">関連</h2> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>stroke</code>属性は与えられた図形要素の外側に描画される色を定義します。<code>stroke</code>属性のデフォルト値は <strong>none</strong> です<strong>.</strong></p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">カテゴリ</th> + <td>プレゼンテーション属性</td> + </tr> + <tr> + <th scope="row">値</th> + <td> + <p><a href="/ja/docs/Web/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> + </td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + <tr> + <th scope="row">標準文書</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<h3 id="SVG_Line" name="SVG_Line">SVG Line with stroke</h3> + +<h4 id="例1_stroke_を使用した直線">例1: stroke を使用した直線</h4> + +<pre class="brush: html"><svg height="50" width="300"> + <path stroke="green" d="M5 20 1215 0" /> +</svg></pre> + +<p>{{ EmbedLiveSample('例1_stroke_を使用した直線', '300', '50', '', 'Web/SVG/Attribute/stroke') }}</p> + +<h4 id="例2_黒丸の枠線として青い_stroke_を使用">例2: 黒丸の枠線として青い stroke を使用</h4> + +<pre class="brush: html"><svg height="100" width="100"> + <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> +</svg></pre> + +<p>{{ EmbedLiveSample('例2_黒丸の枠線として青い_stroke_を使用', '100', '120', '', 'Web/SVG/Attribute/stroke') }}</p> + +<h2 id="context-stroke_を使用する"><code>context-stroke</code> を使用する</h2> + +<p>非標準かつ機能が制限された<code>context-stroke</code> (および<code>context-fill</code>) については {{cssxref("-moz-context-properties")}} プロパティを参照して下さい。</p> + +<h2 id="要素">要素</h2> + +<p>以下の要素で<code>stroke</code>属性を使用できます。</p> + +<ul> + <li>{{SVGElement("shape")}}</li> + <li>{{SVGElement("TextContent")}}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>transform</code></strong> 属性は、要素とその要素の子に適用される変換定義のリストを定義します。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<p class="note"><strong>Note:</strong> SVG2 では、 <code>transform</code> はプレゼンテーション属性であり、 CSS プロパティとして使用することができます。ただし、 CSS プロパティとこの属性との間には構文の違いがあるので注意が必要です。その場合に使用する具体的な構文については、 CSS プロパティの {{cssxref('transform')}} のドキュメントを参照してください。</p> + +<p>プレゼンテーション属性ですので、 <strong><code>transform</code></strong> はあらゆる要素で使用することができます (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要素でのみ使用することができました。)。</p> + +<p>また、 SVG 1.1 からの遺物として、 {{SVGElement('linearGradient')}} と {{SVGElement('radialGradient')}} は <code>gradientTransform</code> 属性に対応しており、 {{SVGElement('pattern')}} は <code>patternTransform</code> 属性に対応しており、どちらも <code>transform</code> 属性と全く同じように動作します。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Transform-list"><code><transform-list></code></a></strong></td> + </tr> + <tr> + <th scope="row">既定値</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + </tbody> +</table> + +<h2 id="Transform_functions" name="Transform_functions">変換関数</h2> + +<p>以下の変換関数は、 <code>transform</code> 属性の <var><code><transform-list></code></var> で使用することができます。</p> + +<p class="warning"><strong>警告:</strong> 仕様書によれば、 CSS の<a href="/ja/docs/Web/CSS/transform-function">変換関数</a>も使用することができます。しかし、互換性は保証されていません。</p> + +<h3 id="Matrix">Matrix</h3> + +<p><code>matrix(<var><a></var> <var><b></var> <var><c></var> <var><d></var> <var><e></var> <var><f></var>)</code> 変換関数は、6つの値の変換行列の形式で変形を指定します。 <code>matrix(<var>a</var>,<var>b</var>,<var>c</var>,<var>d</var>,<var>e</var>,<var>f</var>)</code> は次の変換行列を適用することと等価です。 <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math> これは、前の座標系から新しい座標系への座標の写像を次の行列の等式によって行うものです。<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>newCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prevCoordSys</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \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} </annotation></semantics></math></p> + +<h4 id="Example" name="Example">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Matrix', '100%', 200)}}</p> + +<h3 id="Translate">Translate</h3> + +<p><code>translate(<var><x></var> [<var><y></var>])</code> 変換関数は、オブジェクトを <code><var>x</var></code> と <code><var>y</var></code> によって移動します。 <code><var>y</var></code> が提供されなかった場合は、 <code>0</code> と見なします。</p> + +<p>言い換えれば、次の通りです。</p> + +<pre class="syntaxbox"> <code><var>x</var><sub>new</sub> = <var>x</var><sub>old</sub> + <var><x></var> + <var>y</var><sub>new</sub> = <var>y</var><sub>old</sub> + <var><y></var></code> +</pre> + +<h4 id="Example_2" name="Example_2">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Translate', '100%', 200)}}</p> + +<h3 id="Scale">Scale</h3> + +<p><code>scale(<var><x></var> [<var><y></var>])</code> 変換関数は、 <code><var>x</var></code> と <code><var>y</var></code> による拡大縮小操作を指定します。 <code><var>y</var></code> が提供されなかった場合は、 <code><var>x</var></code> と同じと見なします。</p> + +<h4 id="Example_3" name="Example_3">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Scale', '100%', 200)}}</p> + +<h3 id="Rotate">Rotate</h3> + +<p><code>rotate(<var><a></var> [<var><x></var> <var><y></var>])</code> 変換関数は、指定された点を軸に <code><var>a</var></code> 度の回転を指定します。オプションの引数 <code><var>x</var></code> と <code><var>y</var></code> が提供されなかった場合、回転は現在のユーザーの座標系の原点を基準に行われます。オプションの引数 <code><var>x</var></code> と <code><var>y</var></code> が指定された場合は、回転は <code>(<var>x</var>, <var>y</var>)</code> を基準に行われます。</p> + +<h4 id="Example_4" name="Example_4">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Rotate', '100%', 200)}}</p> + +<h3 id="SkewX">SkewX</h3> + +<p><code>skewX(<var><a></var>)</code> 変換関数は、 X 軸を基準に <code><var>a</var></code> 度の傾斜変換を指定します。</p> + +<h4 id="Example_5">Example</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('SkewX', '100%', 200)}}</p> + +<h3 id="SkewY">SkewY</h3> + +<p><code>skewY(<var><a></var>)</code> 変換関数は、 Y 軸を基準に <code><var>a</var></code> 度の傾斜変換を指定します。</p> + +<h4 id="Example_6" name="Example_6">例</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('SkewY', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>viewBox</code>属性は、特定のcontainer要素に合わせるためのグラフィックス stretchのセットを指定できます。</p> + +<p>The value of the <code>viewBox</code> attribute is a list of four numbers <code>min-x</code>, <code>min-y</code>, <code>width</code> and <code>height</code>, 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") }}.</p> + +<p>Negative values for <code>width</code> or <code>height</code> are not permitted and a value of zero disables rendering of the element.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><em>See above</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<h2 id="要素">要素</h2> + +<p>以下の要素が<code>viewBox</code>属性を使います。</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>writing-mode</code></strong> 属性は、 {{SVGElement("text")}} 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 <code>writing-mode</code> 属性は {{ SVGElement("text") }} 要素にのみ適用されます。 {{ SVGElement("tspan") }}, {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }} サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ {{ SVGAttr("direction") }} および {{ SVGAttr("unicode-bidi") }} により、 {{ SVGElement("text") }} 要素内で変更される可能性があることに注意してください)。</p> + +<p class="note"><strong>注:</strong> プレゼンテーション属性なので、 <code>writing-mode</code> は CSS プロパティとして使用することができます。詳しくは CSS の {{cssxref("writing-mode")}} プロパティを参照してください。</p> + +<p>プレゼンテーション属性として、どの要素にも適用できますが、 {{SVGElement("altGlyph")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} の5つの要素にのみ効果があります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">既定値</th> + <td><code>horizontal-tb</code></td> + </tr> + <tr> + <th scope="row">値</th> + <td><code>horizontal-tb</code> | <code>vertical-rl</code> | <code>vertical-lr</code></td> + </tr> + <tr> + <th scope="row">アニメーション可能</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code>horizontal-tb</code></dt> + <dd>この値はブロックのフロー方向を上から下に定義します。書字方向と文字の方向は共に水平方向です。</dd> + <dt><code>vertical-rl</code></dt> + <dd>この値はブロックのフロー方向を右から左に定義します。書字方向と文字の方向は共に垂直方向です。</dd> + <dt><code>vertical-lr</code></dt> + <dd>この値はブロックのフロー方向を左から右に定義します。書字方向と文字の方向は共に垂直方向です。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td> + <td>{{Spec2("CSS3 Writing Modes")}}</td> + <td>CSS Writing Modes 3 の中で定義</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "text.html#WritingModeProperty", "writing-mode")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>主に CSS Writing Modes 3 の定義を参照し、非推奨の SVG 1.1 の値と新しい値との対応付けを定義します。</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "text.html#WritingModeProperty", "writing-mode")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.attributes.presentation.writing-mode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("writing-mode", "CSS writing-mode")}}</li> +</ul> 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 +--- +<p>« <a href="/ja/docs/Web/SVG/Attribute" title="en/SVG/Attribute">SVG属性リファレンス ホームへ</a></p> +<p>この属性はユーザー座標のx軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。</p> +<p>値の明示がなければ、<strong>0</strong>として記入されたものとして、 {{ SVGElement("filter") }} と {{ SVGElement("mask") }} 要素に関しては <strong>-10%</strong> と記入されたものと解釈します。</p> +<h2 id="使用可能な場所">使用可能な場所</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">カテゴリ</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">値</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + <tr> + <th scope="row">標準文書</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> +<p>{{ page("/en/SVG/Content_type","coordinate") }}</p> +<h2 id="要素">要素</h2> +<p>次の要素は <code>x</code> 属性を使用することができます。</p> +<ul> + <li><a href="/ja/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><strong><code>x1</code></strong> 属性は、二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定するのに使います。一つしか座標を必要としない要素は、これの代わりに {{SVGAttr("x")}} 属性を使います。</p> + +<p>二つの要素がこの属性を使っています。つまり、{{ SVGElement("line") }} と {{ SVGElement("linearGradient") }} です。</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="line">line</h2> + +<p>{{SVGElement('line')}} に関しては、<code>x1</code> は、その直線の開始点の x 座標を定めます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">デフォルト値</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">アニメーション可能</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="Example" name="Example">例</h3> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('line', '100%', 200)}}</p> + +<h2 id="linearGradient">linearGradient</h2> + +<p>{{SVGElement('linearGradient')}} に関しては、<code>x1</code> は、グラデーションのストップ値をマッピングするのに使われる<em>グラデーション・ベクトル</em> (<em>gradient vector)</em> の開始点の x 座標を定めます。この属性の正確な振る舞いは、{{SVGAttr('gradientUnits')}} 属性の影響を受けます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">値</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">デフォルト値</th> + <td><code>0%</code></td> + </tr> + <tr> + <th scope="row">アニメーション可能</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="Example_2" name="Example_2">例</h3> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('linearGradient', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "shapes.html#LineElementX1Attribute", "x1")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><line></code></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#LinearGradientElementX1Attribute", "x1")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><linearGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#LineElementX1Attribute", "x1")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><line></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#LinearGradientElementX1Attribute", "x1")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><linearGradient></code></td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ja/docs/Web/SVG/Attribute" title="en/SVG/Attribute">SVG属性リファレンスホームへ</a></p> +<p>この属性はユーザー座標系のy軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。</p> +<p>値の明示がなければ、<strong>0</strong>として記入されたものとして、 {{ SVGElement("filter") }} と {{ SVGElement("mask") }} 要素に関しては <strong>-10%</strong> と記入されたものと解釈します。</p> +<h2 id="使用可能な場所">使用可能な場所</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">カテゴリ</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">値</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">アニメーション</th> + <td>可</td> + </tr> + <tr> + <th scope="row">標準文書</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> +<p>{{ page("/ja/docs/Web/SVG/Content_type","coordinate") }}</p> +<h2 id="要素">要素</h2> +<p>次の要素は <code>y</code> 属性を使用することができます。</p> +<ul> + <li><a href="/ja/decs/Web/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("fePointLight") }}</li> + <li>{{ SVGElement("feSpotLight") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> +</ul> |