diff options
Diffstat (limited to 'files/ja/web/svg')
95 files changed, 11728 insertions, 0 deletions
diff --git a/files/ja/web/svg/applying_svg_effects_to_html_content/index.html b/files/ja/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..de5f6f0fff --- /dev/null +++ b/files/ja/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,218 @@ +--- +title: HTML コンテンツへ SVG 効果を適用する +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<div>{{ gecko_minversion_header("1.9.1") }}</div> + +<p>最近のブラウザは、CSS スタイルの中での SVG の使用をサポートしており、HTML コンテンツに対してグラフィカルな効果を適用することができます。</p> + +<p>CSS スタイル中の SVG は、HTML ドキュメントと同じファイル内に含めることも、外部スタイルシートに含めることもできます。使用できるプロパティには、mask、clip-path もしくは filter があります。</p> + +<div class="note"><strong>注意:</strong> 外部ファイル内の SVG を参照する場合、参照側の文章と<a href="/ja/docs/Web/Security/Same-origin_policy">同じオリジン</a>を持たなければなければなりません。</div> + +<h2 id="埋め込み_SVG_を使う">埋め込み SVG を使う</h2> + +<p>CSS スタイルを用いて SVG 効果を適用するには、まず最初に 適用する SVG を参照する CSS スタイルを作る必要があります。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><style>p { mask: url(#my-mask); }</style></code></pre> + +<p>上の例では、my-mask という ID を持つ SVG マスクにより、すべての段落がマスクされます。</p> + +<h3 id="例_マスキング">例: マスキング</h3> + +<p>たとえば、次に示すような SVG のコードを HTML 文章に埋め込むと、HTML コンテンツに対してグラデーションマスクを提供する CSS スタイルを宣言することができます。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-css"><svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.target { + mask: url(#mask-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</code></pre> + +<p>この CSS の中で、<code>#mask-1</code> という ID への URL を使用してマスクが指定されていることに注目してください。これがその後ろで設定されている SVG マスクのIDです。それ以外の部分は、グラデーションマスクの詳細について記述しています。</p> + +<p>実際に SVG 効果を XHTML や HTML に適用する場合、次のように単純に上で定義した <code>target</code> スタイルをその要素に割り当てるだけです。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p></code></pre> + +<p>上の例では、要素に適用されたマスクがレンダリングされるはずです。</p> + +<p>{{ EmbedLiveSample('例_マスキング', 360, 270) }}</p> + +<h3 id="例_クリッピング">例: クリッピング</h3> + +<p>この例では、SVG を HTML コンテンツを切り抜くために使用する方法を実演します。リンクの反応範囲ごと切り取られていることに注目してください。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> + +<button onclick="toggleRadius()">Toggle radius</button> + +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css">.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</code></pre> + +<p>これは、円と四角形からなる切り取りエリアを作り、<code>#clipping-path-1</code> という ID に割り当てています。これにより、スタイルから参照されています。このように <code>target</code> スタイルが確立されると、クリップパスはあらゆるエレメントに割り当てることができるようになります。</p> + +<p>SVG にリアルタイムで変更を加えることができ、その変更は HTML のレンダリングに即座に反映されることに注目してください。たとえば、次のコードで上で定義したクリップパスの円の大きさを変更することができます。</p> + +<pre class="brush: js"><code class="language-javascript"> +function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</code></pre> + +<p>{{ EmbedLiveSample('例_クリッピング', 360,290) }}</p> + +<h3 id="例_フィルタリング">例: フィルタリング</h3> + +<p>この例では HTML コンテンツに対して SVG を使用してフィルターを適用する方法を実演します。いくつかのフィルタを定義し、CSS を使って3つの要素それぞれに対して、通常の状態とマウスをホバーした状態の2つの状態にフィルターを適用します。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><p class="target" style="background: lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<pre class="target">lorem</pre> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p></code></pre> + +<p>同じようにしてあらゆる SVG フィルタが適用できます。たとえば、ガウスぼかし効果を適用する場合は次のように書きます。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"> +<svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg></code></pre> + +<p>あるいは色行列を適用するのであれば、次のようにします。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + </filter> +</svg></code></pre> + +<p>さらに、いくつかのフィルタを示します。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><svg height="0"> + <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +</svg></code></pre> + +<p>5つのフィルターは、次の CSS を用いて適用できます。</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css">p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); }</code></pre> + +<p>{{ EmbedLiveSample('例_フィルタリング', 360,300) }}</p> + +<h3 id="例_ぼかし文字">例: ぼかし文字</h3> + +<p>文字にぼかしを入れるには、webkit ベースのブラウザでは（プレフィックス付きの）blur という CSS フィルタが使えます。SVG のフィルタを用いても同じ効果が実現できます。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg></code></pre> + +<p>SVG と CSS のフィルタは、同じクラス内で適用できます。</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"> +.blur { filter: url(#wherearemyglasses); } +</code></pre> + +<p>{{ EmbedLiveSample('例_ぼかし文字', '', '', '') }}</p> + +<p>ぼかし効果は重たい処理のため、慎重に使用してください。特に、スクロールやアニメーションされる要素では注意が必要です。</p> + +<h2 id="外部参照を使う">外部参照を使う</h2> + +<p>クリッピング、マスキング、そのほかに使われる SVG 要素は、その文章が適用される側の HTML 文章と同じ基点から得られるならば、外部文章から読み込むことができます。</p> + +<p>例えば、CSS が <code>default.css</code> という名前のファイルであれば、次のようになります。</p> + +<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>これで SVG が <code>resources.svg</code> という名前のファイルからインポートされ、クリップパスの ID に <code>c1</code> が使用されます。</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (ブログ記事)</li> + <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (ブログ記事) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> +</ul> 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> diff --git a/files/ja/web/svg/compatibility_sources/index.html b/files/ja/web/svg/compatibility_sources/index.html new file mode 100644 index 0000000000..062a2f701d --- /dev/null +++ b/files/ja/web/svg/compatibility_sources/index.html @@ -0,0 +1,17 @@ +--- +title: 互換性の情報源 +slug: Web/SVG/Compatibility_sources +tags: + - SVG +translation_of: Web/SVG/Compatibility_sources +--- +<p>以下の情報源が SVG 要素と属性の互換性の確認に活用できます。</p> + +<ul> + <li><a href="/ja/docs/SVG_in_Firefox" title="ja/docs/SVG_in_Firefox">https://wiki.developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li> + <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> WebKit, Safari, Chrome 向けの<a class="external" href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">記録書庫</a></li> + <li>Opera 9 以降向けの追加情報は <a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> 、 Opera 8向けは <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a></li> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> IE9 向けの対応状況へのヒント</li> + <li><a class="external" href="http://www.codedread.com/svg-support.php">Codedread.com における SV G対応図</a> W3C スイートに対する基本確認事項</li> + <li><a class="external" href="https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics">Wikipedia</a> 基本的な情報 (規格標準ではない)</li> +</ul> diff --git a/files/ja/web/svg/content_type/index.html b/files/ja/web/svg/content_type/index.html new file mode 100644 index 0000000000..16b87760ef --- /dev/null +++ b/files/ja/web/svg/content_type/index.html @@ -0,0 +1,377 @@ +--- +title: Content type +slug: Web/SVG/Content_type +translation_of: Web/SVG/Content_type +--- +<h2 id="Angle">Angle</h2> + +<dl> + <dt><角度></dt> + <dd> + <p>角度は2つの方法のいずれかで指定します。スタイルシートのプロパティの値に使用する際、<角度>は次のように定義されています：</p> + + <pre>angle ::= number (~"deg" | ~"grad" | ~"rad")?</pre> + + <p>単位に"deg"を指定した場合は度、"grad"を指定した場合はグラード 「ゴン」ともいう、そして"rad"を指定するとラジアンとして角度を指定します。</p> + + <p>CSS2で定義されたプロパティの場合は、角度の単位の識別子が提供されなければなりません。角度の値をSVG固有のプロパティと、それらのプレゼンテーション属性に指定するときは、角度の単位の識別子は任意となります。もし識別子が提供されなければ度で指定されたものと想定します。プレゼンテーション属性内のすべてのプロパティでは、SVG1.1またはCSS2で角度の識別子が定義されているか、もし指定するならばすべて小文字でなければなりません。</p> + + <p>SVG属性に角度を指定する場合、<角度>は以下のように定義されます：</p> + + <pre>angle ::= number ("deg" | "grad" | "rad")?</pre> + + <p>SVG属性の中での<角度>の単位の識別子は、すべて小文字にしなければいけません。</p> + + <p>SVG DOM 内での<角度>の値は{{domxref("SVGAngle")}}か{{domxref("SVGAnimatedAngle objects")}}を使用して表現されます。</p> + </dd> +</dl> + +<h2 id="Anything">Anything</h2> + +<dl> + <dt><anything></dt> + <dd> + <p>基本的なデータ型の<anything>は0個以上の文字シーケンスから構成されます。Specifically：</p> + + <pre>anything ::= Char*</pre> + + <p>where <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char" title="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char">Char</a> is the production for a character, as defined in XML 1.0 , section 2.2).</p> + </dd> +</dl> + +<h2 id="Clock-value">Clock-value</h2> + +<dl> + <dt><clock-value></dt> + <dd> + <p>Clock values have the same syntax as in <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">SMIL Animation</a> specification. The grammar for clock values is repeated here:</p> + + <pre>Clock-val ::= Full-clock-val | Partial-clock-val + | Timecount-val +Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)? +Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)? +Timecount-val ::= Timecount ("." Fraction)? (Metric)? +Metric ::= "h" | "min" | "s" | "ms" +Hours ::= DIGIT+; any positive number +Minutes ::= 2DIGIT; range from 00 to 59 +Seconds ::= 2DIGIT; range from 00 to 59 +Fraction ::= DIGIT+ +Timecount ::= DIGIT+ +2DIGIT ::= DIGIT DIGIT +DIGIT ::= [0-9] +</pre> + + <p>For <code>Timecount</code> values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.</p> + + <p>The following are examples of legal clock values:</p> + + <ul> + <li>Full clock values:<br> + <code>02:30:03 </code> = 2 hours, 30 minutes and 3 seconds<br> + <code>50:00:10.25</code> = 50 hours, 10 seconds and 250 milliseconds</li> + <li>Partial clock value:<br> + <code>02:33 </code> = 2 minutes and 33 seconds<br> + <code>00:10.5</code> = 10.5 seconds = 10 seconds and 500 milliseconds</li> + <li>Timecount values:<br> + <code>3.2h </code> = 3.2 hours = 3 hours and 12 minutes<br> + <code>45min </code> = 45 minutes<br> + <code>30s </code> = 30 seconds<br> + <code>5ms </code> = 5 milliseconds<br> + <code>12.467 </code> = 12 seconds and 467 milliseconds</li> + </ul> + + <p>Fractional values are just (base 10) floating point definitions of seconds. Thus:</p> + + <p><code>00.5s = 500 milliseconds<br> + 00:00.005 = 5 milliseconds</code></p> + </dd> +</dl> + +<h2 id="Color">Color</h2> + +<dl> + <dt><color></dt> + <dd> + <p>The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of the {{SVGAttr("color")}} attribute and is a component of the definitions of attributes {{SVGAttr("fill")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("flood-color")}} and {{SVGAttr("lighting-color")}}, which also offer optional ICC-based color specifications.</p> + + <p>SVG supports all of the syntax alternatives for <color> defined in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color">CSS2 syntax and basic data types</a>, and (depend on the implementation) in the future <a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>.</p> + + <p>A <color> is either a keyword or a numerical RGB specification.</p> + + <p>In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">User preferences for colors</a> (CSS2, section 18.2).</p> + + <p>The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, <code>#fb0</code> expands to <code>#ffbb00</code>. This ensures that white (<code>#ffffff</code>) can be specified with the short notation (<code>#fff</code>) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: <code>rgb(255,255,255)</code> = <code>rgb(100%,100%,100%)</code> = <code>#FFF</code>. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.</p> + + <pre>color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? + | "rgb("integer, integer, integer")" + | "rgb("integer "%", integer "%", integer "%)" + | color-keyword +hexdigit ::= [0-9A-Fa-f] +</pre> + + <p>where <code>color-keyword</code> matches (case insensitively) one of the color keywords listed in <a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>, or one of the system color keywords listed in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">User preferences for colors</a> (CSS2, section 18.2).</p> + + <p>The corresponding SVG DOM interface definitions for <color> are defined the one defined by CSS. SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface {{domxref("SVGColor")}}.</p> + </dd> +</dl> + +<h2 id="Coordinate">Coordinate</h2> + +<dl> + <dt><a name="coordinate"><座標></a></dt> + <dd> + <p><座標>は関連する軸に沿って（X座標はX軸に沿って、Y座標はY軸に沿って）ユーザー座標系の原点から所定の座標までの距離を指定します。その構文は<a href="/en-US/docs/SVG/Content_type#length" title="https://developer.mozilla.org/en/SVG/Content_type#length"><長さ></a>と同一です。</p> + + <p>SVG DOM内での<座標>の値は {{domxref("SVGLength")}} もしくは {{domxref("SVGAnimatedLength")}} で表現されます。</p> + </dd> +</dl> + +<h2 id="Frequency">Frequency</h2> + +<dl class="definitions"> + <dt><frequency></dt> + <dd> + <p>Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <a href="/en-US/docs/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> immediately followed by a frequency unit identifier. The frequency unit identifiers are:</p> + + <ul> + <li><code>Hz</code>: Hertz</li> + <li><code>kHz</code>: kilo Hertz</li> + </ul> + + <p>Frequency values may not be negative.</p> + </dd> +</dl> + +<h2 id="FuncIRI">FuncIRI</h2> + +<dl> + <dt><FuncIRI></dt> + <dd>Functional notation for a reference, the syntax for this reference is the same as the {{cssxref("uri", "CSS URI")}}</dd> +</dl> + +<h2 id="ICCColor">ICCColor</h2> + +<dl> + <dt><icccolor></dt> + <dd> + <p>An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a {{SVGElement("color-profile")}} element, and one or more color component values. The grammar is as follows:</p> + + <pre>icccolor ::= "icc-color(" name (, number)+ ")" +</pre> + + <p>The corresponding SVG DOM interface for <icccolor> is {{domxref("SVGICCColor")}}.</p> + </dd> +</dl> + +<h2 id="Integer">Integer</h2> + +<dl> + <dt><integer></dt> + <dd> + <p>An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":</p> + + <pre>integer ::= [+-]? [0-9]+</pre> + + <p>If the sign character is not present, the number is non-negative.</p> + + <p>Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.</p> + + <p>Within the SVG DOM, an <integer> is represented as a <code>number</code> or an {{domxref("SVGAnimatedInteger")}}.</p> + </dd> +</dl> + +<h2 id="IRI">IRI</h2> + +<dl> + <dt><IRI></dt> + <dd> + <p>An Internationalized Resource Identifier.</p> + + <p>On the Internet, resources are identified using <em>IRI</em>s (Internationalized Resource Identifiers). For example, an SVG file called someDrawing.svg located at <a href="http://example.com" rel="freelink">http://example.com</a> might have the following <em>IRI</em>:</p> + + <pre>http://example.com/someDrawing.svg +</pre> + + <p>An <em>IRI</em> can also address a particular element within an XML document by including an <em>IRI</em> fragment identifier as part of the <em>IRI</em>. An <em>IRI</em> which includes an <em>IRI</em> fragment identifier consists of an optional base <em>IRI</em>, followed by a "#" character, followed by the <em>IRI</em> fragment identifier. For example, the following <em>IRI</em> can be used to specify the element whose ID is "Lamppost" within file someDrawing.svg:</p> + + <pre>http://example.com/someDrawing.svg#Lamppost +</pre> + + <p><em>IRI</em>s are used in the {{SVGAttr("xlink:href")}} attribute. Some attributes allow both <em>IRI</em>s and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is simply an <em>IRI</em> delimited with a functional notation. Note: For historical reasons, the delimiters are "url(" and ")", for compatibility with the CSS specifications. The <em>FuncIRI</em> form is used in presentation attributes .</p> + + <p>SVG makes extensive use of <em>IRI</em> references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a {{SVGElement("linearGradient")}} element and give it an ID, as in:</p> + + <pre><linearGradient xml:id="MyGradient">...</linearGradient> +</pre> + + <p>You then reference the linear gradient as the value of the {{SVGAttr("fill")}} attribute for the rectangle, as in the following example:</p> + + <pre><rect fill="url(#MyGradient)"/> +</pre> + + <p>SVG supports two types of <em>IRI</em> references:</p> + + <ul> + <li>local <em>IRI</em> references, where the IRI reference does not contain an <code><absoluteIRI></code> or <code><relativeIRI></code> and thus only contains a fragment identifier (i.e., <code>#<elementID></code> or <code>#xpointer(id<elementID>)</code>)</li> + <li>non-local <em>IRI</em> references, where the <em>IRI</em> reference does contain an <code><absoluteIRI></code> or <code><relativeIRI></code></li> + </ul> + + <p>For the full specification of IRI references in SVG, see <a href="http://www.w3.org/TR/SVG/linking.html#IRIReference" title="http://www.w3.org/TR/SVG/linking.html#IRIReference">SVG 1.1 (2nd Edition): IRI references</a>.</p> + </dd> +</dl> + +<h2 id="Length">Length</h2> + +<dl> + <dt><a name="length"><長さ></a></dt> + <dd> + <p><長さ>は距離寸法です。数値とともに単位を提供します。<長さ>は2つの方法のいずれかで指定します。スタイルシート内で使用する際、<長さ>は次のように定義されています：</p> + + <pre>length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre> + + <p>単位の識別子の意味については<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units">CSS2の仕様を参照してください</a>。</p> + + <p>CSS2のプロパティに定義する場合、<長さ>の単位の識別子が提供されなければいけません。SVG固有のプロパティやプレゼンテーション属性に定義する場合は、単位の識別子は任意となります。もし単位の識別子が提供されなかった場合、<長さ>は現在のユーザー座標系で表されます。プレゼンテーション属性内のすべてのプロパティでは、SVG1.1もしくは CSS2 の中で単位の識別子が定義されているか、もし指定するならば、すべて小文字で無ければなりません。</p> + + <p>SVG属性に長さを使用する場合、<長さ>は以下のように定義されます：</p> + + <pre>length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre> + + <p>SVG属性の中での<長さ>の単位の識別子はすべて小文字にしなければいけません。</p> + + <p>Note 単位の識別子の無い<長さ>の定義は、パーセント単位の<長さ>として表されます。パーセント単位の<長さ>は、値が指定されている属性に依存します。よくある2つの例を挙げます：</p> + + <ul> + <li>SVGビューポートの幅または高さの割合を表す場合</li> + <li>指定されたオブジェクト上のバウンディングボックスの幅または高さの割合を表す場合</li> + </ul> + + <p> </p> + + <p>SVG DOM内での<長さ>の値は{{domxref("SVGLength")}} もしくは {{domxref("SVGAnimatedLength")}} で表現されます。</p> + </dd> +</dl> + +<h2 id="List-of-Ts">List-of-<var>T</var>s</h2> + +<dl> + <dt><list-of-<var>T</var>s></dt> + <dd> + <p>(Where <var>T</var> is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.</p> + + <p>White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).</p> + + <p>The following is a template for an EBNF grammar describing the <list-of-<var>T</var>s> syntax:</p> + + <pre>list-of-<var>T</var>s ::= <var>T</var> + | <var>T</var>, list-of-<var>T</var>s</pre> + + <p>Within the SVG DOM, values of a <list-of-<var>T</var>s> type are represented by an interface specific for the particular type <var>T</var>. For example, a <list-of-lengths> is represented in the SVG DOM using an {{domxref("SVGLengthList")}} or {{domxref("SVGAnimatedLengthList")}} object.</p> + </dd> +</dl> + +<h2 id="Name">Name</h2> + +<dl> + <dt><name></dt> + <dd> + <p>A name, which is a string where a few characters of syntaxtic significance are disallowed.</p> + + <pre>name ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */</pre> + </dd> +</dl> + +<h2 id="Number">Number</h2> + +<dl> + <dt><number></dt> + <dd> + <p>Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:</p> + + <pre>number ::= integer + | [+-]? [0-9]* "." [0-9]+</pre> + + <p>This syntax is the same as the definition in CSS (CSS2, section 4.3.1).</p> + + <p>When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:</p> + + <pre>number ::= integer ([Ee] integer)? + | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?</pre> + + <p>Within the SVG DOM, a <number> is represented as a float, {{domxref("SVGNumber")}} or a {{domxref("SVGAnimatedNumber")}}.</p> + </dd> +</dl> + +<h2 id="Number-optional-number">Number-optional-number</h2> + +<dl> + <dt><number-optional-number></dt> + <dd> + <p>A pair of <number>s, where the second <number> is optional.</p> + + <pre>number-optional-number ::= number + | number, number</pre> + + <p>In the SVG DOM, a <number-optional-number> is represented using a pair of {{domxref("SVGAnimatedInteger")}} or {{domxref("SVGAnimatedNumber")}} objects.</p> + </dd> +</dl> + +<h2 id="Opacity_value">Opacity value</h2> + +<dl> + <dt><opacity-value></dt> + <dd>The opacity of the color or the content the current object is filled with, as a <a href="/en-US/docs/SVG/Content_type#Number" title="SVG/Content_type#Number"><number></a>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.</dd> +</dl> + +<h2 id="Paint">Paint</h2> + +<dl> + <dt><paint></dt> + <dd> + <p>The values for properties {{SVGAttr("fill")}} and {{SVGAttr("stroke")}} are specifications of the type of paint to use when filling or stroking a given graphics element. The available options and syntax for <paint> are described in <a href="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint" title="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint">Specifying paint</a>.</p> + + <p>Within the SVG DOM, <paint> values are represented using {{domxref("SVGPaint")}} objects.</p> + </dd> +</dl> + +<h2 id="Percentage">Percentage</h2> + +<dl> + <dt id="DataTypePercentage"><percentage></dt> + <dd> + <p>Percentages are specified as a number followed by a "%" character:</p> + + <pre>percentage ::= number "%"</pre> + + <p>Note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.</p> + + <p>Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.</p> + + <p>Within the SVG DOM, a <percentage> is represented using an {{domxref("SVGNumber")}} or {{domxref("SVGAnimatedNumber")}} object.</p> + </dd> +</dl> + +<h2 id="Time">Time</h2> + +<dl> + <dt><time></dt> + <dd> + <p>A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:</p> + + <ul> + <li><span class="attr-value">ms: milliseconds</span></li> + <li><span class="attr-value">s: seconds</span></li> + </ul> + </dd> +</dl> + +<h2 id="Transform-list">Transform-list</h2> + +<dl> + <dt><transform-list></dt> + <dd> + <p>A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in the {{SVGAttr("transform")}} attribute definition.</p> + + <p>Within the SVG DOM, a <transform-list> value is represented using an {{domxref("SVGTransformList")}} or {{domxref("SVGAnimatedTransformList")}} object.</p> + </dd> +</dl> diff --git a/files/ja/web/svg/element/a/index.html b/files/ja/web/svg/element/a/index.html new file mode 100644 index 0000000000..2335081323 --- /dev/null +++ b/files/ja/web/svg/element/a/index.html @@ -0,0 +1,150 @@ +--- +title: <a> +slug: Web/SVG/Element/a +tags: + - Element + - Reference + - SVG + - SVG Container + - SVG コンテナー + - 要素 +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p><strong><a></strong> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の {{htmlelement("a")}} 要素ととても良く似ています。</p> + +<p>SVG の <code><a></code> 要素はコンテナーですので、 (HTML のような) テキストを囲むものだけでなく、図形を囲むリンクを生成することもできます。</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css notranslate">@namespace svg url(http://www.w3.org/2000/svg); +html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- 図形を囲むリンク --> + <a href="/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- テキストを囲むリンク --> + <a href="/docs/Web/SVG/Element/text"> + <text x="50" y="90" text-anchor="middle"> + &lt;circle&gt; + </text> + </a> +</svg></pre> + +<pre class="brush: css notranslate">/* SVG ではリンクに既定の視覚スタイルがないので、 + 何かを追加するのがいいでしょう */ + +@namespace svg url(http://www.w3.org/2000/svg); +/* SVG の <a> 要素のみを選択し、 HTML を除外するために必要。 + 下記の警告を参照 */ + +svg|a:link, svg|a:visited { + cursor: pointer; +} + +svg|a text, +text svg|a { + fill: blue; /* テキストであっても、 SVG は塗りつぶし色を使用する */ + text-decoration: underline; +} + +svg|a:hover, svg|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<div class="warning"> +<p>この要素は <a href="/ja/docs/Web/HTML/Element/a">HTML の <code><a></code> 要素</a>と同じタグ名なので、 <code>a</code> を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 <a href="/ja/docs/Web/CSS/@namespace"><code>@namespace</code> 規則</a>で二つを区別してみてください。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt> + <dd>移動するのではなく {{Glossary("URL")}} をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。<br> + <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>ハイパーリンクが指す先の {{Glossary("URL")}} または URL フラグメントです。<br> + <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("hreflang", "a")}}</dt> + <dd>ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。<br> + <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> + <dd>空白区切りの URL のリストで、ハイパーリンクをたどるとき、 {{HTTPMethod("POST")}} リクエストで本文が <code>PING</code> であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 {{domxref("Navigator.sendBeacon()")}} を参照してください。<br> + <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> + <dd>どの<a href="/ja/docs/Web/HTTP/Headers/Referer">リファラー</a>をアクセス先の {{Glossary("URL")}} に送信するかです。<br> + <small><em>値種別</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> + <dd>対象のオブジェクトとリンクしているオブジェクトの関係です。<br> + <small><em>値種別</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("target")}}</dt> + <dd>リンクされた {{Glossary("URL")}} の表示先です。<br> + <small><em>値種別</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>既定値</em>: <code>_self</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("type", "a")}}</dt> + <dd>リンク先の URL の {{Glossary("MIME type", "MIME タイプ")}}です。<br> + <small><em>値種別</em>: <strong><string></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。<br> + <small><em>値種別</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>主なもの: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> + <dd><small>主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink 属性</dt> + <dd><small>主なもの: {{SVGAttr("xlink:title")}}</small></dd> + <dt>ARIA 属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>{{svginfo}}</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", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>{{SVGAttr("xlink:href")}} 属性を {{SVGAttr("href")}} で置き換え</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</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.elements.a")}}</p> diff --git a/files/ja/web/svg/element/animate/index.html b/files/ja/web/svg/element/animate/index.html new file mode 100644 index 0000000000..4f76295cdb --- /dev/null +++ b/files/ja/web/svg/element/animate/index.html @@ -0,0 +1,103 @@ +--- +title: <animate> +slug: Web/SVG/Element/animate +tags: + - Element + - SVG + - SVG Animation + - SVG アニメーション +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p>SVG の <strong><code><animate></code></strong> 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100%; margin:0; padding:0; }</pre> +</div> + +<pre class="brush: html; highlight[2]"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect width="10" height="10"> + <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /> + </rect> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Animation_Attributes" name="Animation_Attributes">アニメーション属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> + <dd><small>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> + <dd><small>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Attributes">その他のアニメーション属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}</small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr('id')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>この要素は {{domxref("SVGAnimateElement")}} インターフェイスを実装しています。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。</p> + +<p>アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<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", "#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<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.elements.animate")}}</p> +</div> diff --git a/files/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..8c5927ffe4 --- /dev/null +++ b/files/ja/web/svg/element/animatecolor/index.html @@ -0,0 +1,86 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - Deprecated + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateColor +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<div class="warning"> +<p>この要素はSVG1.1仕様（第2版）で廃止され、将来のSVGのバージョンで削除される可能性があります。 この要素は {{ SVGElement("animate") }} 要素に置き換えられ、FirefoxやInternet Explorerでは実装されておりません。SVGファイル製作者はこの要素の代わりに{{ SVGElement("animate") }}要素を使うべきです。</p> +</div> + +<h2 id="概要">概要</h2> + +<p><code>animateColor</code>要素は時間経過による色の変換を指定します。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<p>» <a href="/files/3264/animateColor.svg" title="/files/3264/animateColor.svg">animateColor.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> +</ul> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この要素は <code><a href="/en-US/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code> インターフェースを提供します。</p> + +<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("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.animateColor")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("animate") }}</li> +</ul> diff --git a/files/ja/web/svg/element/animatemotion/index.html b/files/ja/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..cfc03811f9 --- /dev/null +++ b/files/ja/web/svg/element/animatemotion/index.html @@ -0,0 +1,120 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateMotion +--- +<div>{{SVGRef}}</div> + +<p>SVG の <strong><code><animateMotion></code></strong> 要素は、ある要素がモーションパスに沿って移動する方法を定義します。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 既存のパスを再利用するには、 <code><animateMotion></code> 要素内の {{SVGElement("mpath")}} 要素を {{SVGAttr("path")}} 属性の代わりに使用する必要があります。</p> +</div> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100%; margin: 0; padding: 0; display:block; }</pre> +</div> + +<pre class="brush: html; highlight[6,7] notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="lightgrey" + d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /> + + <circle r="5" fill="red"> + <animateMotion dur="10s" repeatCount="indefinite" + path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /> + </circle> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Usage_context" name="Usage_context">使用場面</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("keyPoints")}}</dt> + <dd>この属性は [0,1] の範囲で、それぞれの {{SVGAttr("keyTimes")}} に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>*; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("path")}}</dt> + <dd>この属性は、 {{SVGAttr('d')}} 属性と同じ構文を使用して、モーションパスを定義します。<br> + <small><em>値の型</em>: <strong><string></strong>; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("rotate")}}</dt> + <dd>この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>|<code>auto</code>|<code>auto-reverse</code>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>no</strong></small></dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code><animateMotion></code> においては、 {{SVGAttr("calcMode")}} 属性の既定値は <code>paced</code> です。</p> +</div> + +<h3 id="Animation_Attributes" name="Animation_Attributes">アニメーション属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Timing_Attributes">アニメーションタイミング属性</a></dt> + <dd><small>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Value_Attributes">アニメーション値属性</a></dt> + <dd><small>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Attributes">他のアニメーション属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">アニメーションイベント属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}</small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に重要なもの: {{SVGAttr('id')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル付け属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>この要素は {{domxref("SVGAnimateMotionElement")}} インターフェイスを実装しています。</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", "#AnimateMotionElement", "<animateMotion>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</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.elements.animateMotion")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGElement("mpath")}}</li> +</ul> diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..341c299fdb --- /dev/null +++ b/files/ja/web/svg/element/animatetransform/index.html @@ -0,0 +1,99 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - Element + - SVG + - SVG Animation +translation_of: Web/SVG/Element/animateTransform +--- +<div>{{SVGRef}}</div> + +<p><code>animateTransform</code> 要素は、 ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたはゆがみのアニメーションを制御することができます。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<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" > + + <polygon points="60,30 90,90 30,90"> + <animateTransform attributeName="transform" + attributeType="XML" + type="rotate" + from="0 60 70" + to="360 60 70" + dur="10s" + repeatCount="indefinite"/> + </polygon> +</svg></pre> + +<p><strong>ライブサンプル</strong></p> + +<p>{{ EmbedLiveSample('例','120','120') }}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この属性は <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code> インターフェースを提供します。</p> + +<p> </p> + +<h2 id="仕様">仕様</h2> + +<table> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<div class="hidden">このページの互換表は構造化データにより作られました。データにコントリビュートしたければ <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("svg.elements.animateTransform")}}</p> diff --git a/files/ja/web/svg/element/circle/index.html b/files/ja/web/svg/element/circle/index.html new file mode 100644 index 0000000000..16c38d5ac5 --- /dev/null +++ b/files/ja/web/svg/element/circle/index.html @@ -0,0 +1,90 @@ +--- +title: circle +slug: Web/SVG/Element/circle +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p><code><strong><circle></strong></code> <a href="https://developer.mozilla.org/ja/docs/Web/SVG">SVG</a> 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性値">属性値</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> + <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li> + <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> + <li>{{SVGAttr("r")}}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement">SVGCircleElement</a> インターフェイスを実装しています。</p> + +<h2 id="例">例</h2> + +<h3 id="SVG">SVG</h3> + +<div id="Example"> +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100"/> +</svg> +</pre> +</div> + +<h3 id="出力">出力</h3> + +<p>{{EmbedLiveSample('Example', 200, 200)}}</p> + +<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", "shapes.html#CircleElement", "<circle>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElement", "<circle>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.circle")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> +</ul> diff --git a/files/ja/web/svg/element/defs/index.html b/files/ja/web/svg/element/defs/index.html new file mode 100644 index 0000000000..e9fb934e13 --- /dev/null +++ b/files/ja/web/svg/element/defs/index.html @@ -0,0 +1,85 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - SVG + - SVG Container +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎり<code>defs</code>要素内で定義されることが推奨されています。<code>defs</code>要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。<code>defs</code>要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、{{ SVGElement("use") }}要素を使用します。</p> + +<h2 id="利用コンテキスト">利用コンテキスト</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件的処理属性（コンディショナルプロセッシング属性）</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">描画イベント属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="スペシフィック属性">スペシフィック属性</h3> + +<p><em>スペシフィック属性はありません</em></p> + +<h2 id="DOM_インタフェース">DOM インタフェース</h2> + +<p>この要素は <code><a href="/en/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code> インタフェースを実装しています。</p> + +<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", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("svg.elements.defs")}}</p> diff --git a/files/ja/web/svg/element/desc/index.html b/files/ja/web/svg/element/desc/index.html new file mode 100644 index 0000000000..584620f1b0 --- /dev/null +++ b/files/ja/web/svg/element/desc/index.html @@ -0,0 +1,72 @@ +--- +title: desc +slug: Web/SVG/Element/desc +tags: + - Element + - SVG + - SVG Descriptive +translation_of: Web/SVG/Element/desc +--- +<div>{{SVGRef}}</div> + +<p>SVG描画における各コンテナ要素またはグラフィック要素は、説明がテキストのみの <strong><code><desc></code></strong> 要素を用いる説明を供給することができます。</p> + +<p>現在の SVG ドキュメントが視覚メディア上で SVG としてレンダリングされるとき、<code><desc></code> 要素はグラフィックとしてレンダリングされません。 代替プレゼンテーションは、<code><desc></code> 要素を表示するが {{SVGElement("path")}} 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方が可能です。<code><desc></code> 要素は一般に SVG ドキュメントのアクセシビリティを向上させます。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<p><em>なし</em></p> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGDescElement")}} インターフェイスを実装します。</p> + +<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', 'struct.html#DescriptionAndTitleElements', '<desc>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<desc>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.desc")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{SVGElement("title")}}</li> +</ul> diff --git a/files/ja/web/svg/element/ellipse/index.html b/files/ja/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..cb9ab982f7 --- /dev/null +++ b/files/ja/web/svg/element/ellipse/index.html @@ -0,0 +1,110 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p><code>ellipse</code> 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。</p> + +<div class="note"> +<p><strong>注記:</strong> 楕円要素は楕円の傾きを指定することはできません (例えば、45 度の角度で傾斜した楕円を描画したい場合)、しかし {{SVGAttr("transform")}} 属性を使用することで回転させることは可能です。</p> +</div> + +<div id="LiveSample"> +<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"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> +</svg></pre> + +<p>{{EmbedLiveSample('LiveSample', 100, '100%')}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{SVGAttr("cx")}}</dt> + <dd>楕円の x 座標。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("cy")}}</dt> + <dd>楕円の y 座標。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>0</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("rx")}}</dt> + <dd>x 軸の半径。<br> + <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("ry")}}</dt> + <dd>y 軸の半径。<br> + <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>デフォルト値</em>: <code>auto</code>; <em>アニメーション</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>この属性は、使用単位での単位合計パス長さを指定します。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>デフォルト値</em>: <em>none</em>; <em>アニメーション</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>注記:</strong> SVG2 以降、<code>cx</code>、<code>cy</code>、<code>rx</code>、<code>ry</code> は、<em>Geometry Propertie</em>s であり、これらの属性は要素の CSS プロパティとして使用することもできます。</p> +</div> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>注目すべき属性: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>注目すべき属性: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>、<a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical イベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>注目すべき属性: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA 属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用可能な場所</h2> + +<p>{{svginfo}}</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#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td><code>rx</code> と <code>ry</code> に <code>auto</code> を追加</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("svg.elements.ellipse")}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">関連情報</h2> + +<ul> + <li>その他の SVG 基本図形: <strong>{{ SVGElement('circle') }}</strong>, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> +</ul> diff --git a/files/ja/web/svg/element/fecolormatrix/index.html b/files/ja/web/svg/element/fecolormatrix/index.html new file mode 100644 index 0000000000..d463a68ac9 --- /dev/null +++ b/files/ja/web/svg/element/fecolormatrix/index.html @@ -0,0 +1,217 @@ +--- +title: <feColorMatrix> +slug: Web/SVG/Element/feColorMatrix +tags: + - Element + - SVG + - SVG Filter +translation_of: Web/SVG/Element/feColorMatrix +--- +<div>{{SVGRef}}</div> + +<p><strong><code><feColorMatrix></code></strong> は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 <code>[R,G,B,A]</code> は 5 x 5 の行列で<a class="external" href="https://en.wikipedia.org/wiki/Matrix_multiplication">行列乗算</a>され、新しい色 <code>[R<em>'</em>,G<em>'</em>,B<em>'</em>,A<em>'</em>]</code> を生成します。</p> + +<div class="blockIndicator note"> +<p>基本的な記号 <em><code><strong>'</strong></code></em> は、数学で変換された結果を表すために使用されます。</p> +</div> + +<pre class="notranslate">| R<em>'</em> | | r<sub>1</sub> r<sub>2</sub> r<sub>3</sub> r<sub>4</sub> r<sub>5</sub> | | R | +| G<em>'</em> | | g<sub>1</sub> g<sub>2</sub> g<sub>3</sub> g<sub>4</sub> g<sub>5</sub> | | G | +| B<em>'</em> | = | b<sub>1</sub> b<sub>2</sub> b<sub>3</sub> b<sub>4</sub> b<sub>5</sub> | * | B | +| A<em>'</em> | | a<sub>1</sub> a<sub>2</sub> a<sub>3</sub> a<sub>4</sub> a<sub>5</sub> | | A | +| 1 | | 0 0 0 0 1 | | 1 |</pre> + +<p>簡略化すると、新しいピクセルの各色のチャンネルがどのように計算されるかを以下に示します。最後の行は値が一定なので無視されます。</p> + +<pre class="notranslate">R<em>'</em> = r<sub>1</sub>*R + r<sub>2</sub>*G + r<sub>3</sub>*B + r<sub>4</sub>*A + r<sub>5</sub> +G<em>'</em> = g<sub>1</sub>*R + g<sub>2</sub>*G + g<sub>3</sub>*B + g<sub>4</sub>*A + g<sub>5</sub> +B<em>'</em> = b<sub>1</sub>*R + b<sub>2</sub>*G + b<sub>3</sub>*B + b<sub>4</sub>*A + b<sub>5</sub> +A<em>'</em> = a<sub>1</sub>*R + a<sub>2</sub>*G + a<sub>3</sub>*B + a<sub>4</sub>*A + a<sub>5</sub> +</pre> + +<p>新しいピクセルの赤の量、すなわち <code>R<em>'</em></code> に注目すると下記のようになります。</p> + +<p>これは以下の値の合計です。</p> + +<ul> + <li>旧ピクセルの赤成分 <code>R</code> の <code>r<sub>1</sub></code> 倍</li> + <li>旧ピクセルの緑成分 <code>G</code> の <code>r<sub>2</sub></code> 倍</li> + <li>旧ピクセルの青成分 <code>B</code> の <code>r<sub>3</sub></code> 倍</li> + <li>旧ピクセルのアルファ成分 <code>A</code> の <code>r<sub>4</sub></code> 倍</li> + <li>加えて加算値の <code>r<sub>5</sub></code></li> +</ul> + +<p>これらの指定された数量は任意の実数を取ることができますが、最終的な <strong>R'</strong> は 0 ～ 1 の間に丸められます。 <strong>G'</strong>, <strong>B'</strong>, <strong>A'</strong> についても同様です。</p> + +<pre class="notranslate">R' = r1 * R + r2 * G + r3 * B + r4 * A + r5 +New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]</pre> + +<p>例えば、真っ黒な画像をより赤くしたい場合は、 <code>r<sub>5</sub></code> を正の実数 <em>x</em> とすれば、新しい画像の各画素の赤さを <em>x</em> だけ増加させます。</p> + +<p><strong>単位行列</strong> は次のようになります。</p> + +<pre class="notranslate"> R G B A W +R' | 1 0 0 0 0 | +G' | 0 1 0 0 0 | +B' | 0 0 1 0 0 | +A' | 0 0 0 1 0 | +</pre> + +<p>この中では、新しい値はすべて古い値のちょうど 1 倍の値であり、それ以外は何も加えられていません。ここから行列の操作を始めることをお勧めします。</p> + +<h2 id="Usage_context" name="Usage_context">使用場面</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Filter_primitive_attributes">フィルタープリミティブ属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<ul> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("type")}}</li> + <li>{{SVGAttr("values")}}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGFEColorMatrixElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[19-24,31-33,40-42,49-50] notranslate"><svg width="100%" height="100%" viewBox="0 0 150 500" + preserveAspectRatio="xMidYMid meet" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- ref --> + <defs> + <g id="circles"> + <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> + </g> + </defs> + <use href="#circles" /> + <text x="70" y="50">Reference</text> + + <!-- identity matrix --> + <filter id="colorMeTheSame"> + <feColorMatrix in="SourceGraphic" + type="matrix" + values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 0 0 1 0" /> + </filter> + <use href="#circles" transform="translate(0 70)" filter="url(#colorMeTheSame)" /> + <text x="70" y="120">Identity matrix</text> + + <!-- Combine RGB into green matrix --> + <filter id="colorMeGreen"> + <feColorMatrix in="SourceGraphic" + type="matrix" + values="0 0 0 0 0 + 1 1 1 1 0 + 0 0 0 0 0 + 0 0 0 1 0" /> + </filter> + <use href="#circles" transform="translate(0 140)" filter="url(#colorMeGreen)" /> + <text x="70" y="190">rgbToGreen</text> + + <!-- saturate --> + <filter id="colorMeSaturate"> + <feColorMatrix in="SourceGraphic" + type="saturate" + values="0.2" /> + </filter> + <use href="#circles" transform="translate(0 210)" filter="url(#colorMeSaturate)" /> + <text x="70" y="260">saturate</text> + + <!-- hueRotate --> + <filter id="colorMeHueRotate"> + <feColorMatrix in="SourceGraphic" + type="hueRotate" + values="180" /> + </filter> + <use href="#circles" transform="translate(0 280)" filter="url(#colorMeHueRotate)" /> + <text x="70" y="330">hueRotate</text> + + <!-- luminanceToAlpha --> + <filter id="colorMeLTA"> + <feColorMatrix in="SourceGraphic" + type="luminanceToAlpha" /> + </filter> + <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" /> + <text x="70" y="400">luminanceToAlpha</text> +</svg></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", "100%", 700, "/files/4371/test.png")}}</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('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}}</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.elements.feColorMatrix")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li><a href="/ja/docs/Web/SVG/Tutorial/Filter_effects">SVG チュートリアル: フィルター効果</a></li> +</ul> diff --git a/files/ja/web/svg/element/fedropshadow/index.html b/files/ja/web/svg/element/fedropshadow/index.html new file mode 100644 index 0000000000..ddc3927577 --- /dev/null +++ b/files/ja/web/svg/element/fedropshadow/index.html @@ -0,0 +1,104 @@ +--- +title: <feDropShadow> +slug: Web/SVG/Element/feDropShadow +tags: + - Element + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/feDropShadow +--- +<div>{{SVGRef}}</div> + +<p>SVG の <strong><code><feDropShadow></code></strong> フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは {{SVGElement('filter')}} 要素の中でのみ使用できます。</p> + +<p class="note">ドロップシャドウの色や不透明度は、 {{SVGAttr('flood-color')}} や {{SVGAttr('flood-opacity')}} の各プレゼンテーション属性を使用することで変更できます。</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4] notranslate"><svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="shadow"> + <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/> + </filter> + <filter id="shadow2"> + <feDropShadow dx="0" dy="0" stdDeviation="0.5" + flood-color="cyan"/> + </filter> + <filter id="shadow3"> + <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" + flood-color="pink" flood-opacity="0.5"/> + </filter> + </defs> + + <circle cx="5" cy="50%" r="4" + style="fill:pink; filter:url(#shadow);"/> + + <circle cx="15" cy="50%" r="4" + style="fill:pink; filter:url(#shadow2);"/> + + <circle cx="25" cy="50%" r="4" + style="fill:pink; filter:url(#shadow3);"/> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 150, '100%')}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("dx")}}</dt> + <dd>この属性は、ドロップシャドウの X 方向のオフセットを定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("dy")}}</dt> + <dd>この属性は、ドロップシャドウの Y 方向のオフセットを定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("stdDeviation")}}</dt> + <dd>この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>既定値</em>: <code>2</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Filters_Attributes">フィルタープリミティブ属性</a></dt> + <dd><small>{{SVGAttr('height')}}, {{SVGAttr('in')}}, {{SVGAttr('result')}}, {{SVGAttr('x')}}, {{SVGAttr('y')}}, {{SVGAttr('width')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('flood-color')}}, {{SVGAttr('flood-opacity')}}</small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>{{svginfo}}</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("Filters 1.0", "#feDropShadowElement", "<feDropShadow>")}}</td> + <td>{{Spec2("Filters 1.0")}}</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.elements.feDropShadow")}}</p> diff --git a/files/ja/web/svg/element/foreignobject/index.html b/files/ja/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..00e38530a5 --- /dev/null +++ b/files/ja/web/svg/element/foreignobject/index.html @@ -0,0 +1,113 @@ +--- +title: <foreignObject> +slug: Web/SVG/Element/foreignObject +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/foreignObject +--- +<div>{{SVGRef}}</div> + +<p><strong><code><foreignObject></code></strong> <a href="/ja/docs/Web/SVG">SVG</a> 要素は、異なるユーザーエージェントによって描画されるグラフィックコンテンツを持つ外部XML名前空間を含めることを可能にします。含まれた外部グラフィックコンテンツは、SVG 変換や合成の対象となります。</p> + +<p>The contents of <code>foreignObject</code> are assumed to be from a different namespace. Any SVG elements within a <code>foreignObject</code> will not be drawn, except in the situation where a properly defined SVG subdocument with a proper <code>xmlns</code> attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).</p> + +<p>Usually, a <code>foreignObject</code> will be used in conjunction with the {{SVGElement("switch")}} element and the {{SVGAttr("requiredExtensions")}} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.</p> + +<h2 id="利用可能な場所">利用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: xml"><svg width="400px" height="300px" viewBox="0 0 400 300" + xmlns="http://www.w3.org/2000/svg"> + <desc>This example uses the 'switch' element to provide a + fallback graphical representation of a paragraph, if + XHTML is not supported.</desc> + + <!-- The 'switch' element will process the first child element + whose testing attributes evaluate to true.--> + <switch> + + <!-- Process the embedded XHTML if the requiredExtensions attribute + evaluates to true (i.e., the user agent supports XHTML + embedded within SVG). --> + <foreignObject width="100" height="50" + requiredExtensions="http://www.w3.org/1999/xhtml"> + <!-- XHTML content goes here --> + <body xmlns="http://www.w3.org/1999/xhtml"> + <p>Here is a paragraph that requires word wrap</p> + </body> + </foreignObject> + + <!-- Else, process the following alternate SVG. + Note that there are no testing attributes on the 'text' element. + If no testing attributes are provided, it is as if there + were testing attributes and they evaluated to true.--> + <text font-size="10" font-family="Verdana"> + <tspan x="10" y="10">Here is a paragraph that</tspan> + <tspan x="10" y="20">requires word wrap.</tspan> + </text> + </switch> +</svg> +</pre> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("height")}}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGForeignObjectElement")}} インターフェイスを実装します。</p> + +<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', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.foreignObject")}}</p> diff --git a/files/ja/web/svg/element/g/index.html b/files/ja/web/svg/element/g/index.html new file mode 100644 index 0000000000..7d49f5f3ed --- /dev/null +++ b/files/ja/web/svg/element/g/index.html @@ -0,0 +1,87 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - Element + - Reference + - SVG + - SVG Container +translation_of: Web/SVG/Element/g +--- +<div>{{SVGRef}}</div> + +<p><strong><code><g></code></strong> <a href="/ja/docs/Web/SVG">SVG</a> 要素は、他のSVG要素をグループ化するために用いられるコンテナです。</p> + +<p><code><g></code> 要素に適用された変形はその全ての子要素に対して実行されます。適用された属性は子要素に継承されます。加えて、多数のオブジェクトを グループかしておくと後に {{SVGElement("use")}} 要素で参照することができます。</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Using g to inherit presentation attributes --> + <g fill="white" stroke="green" stroke-width="5"> + <circle cx="40" cy="40" r="25" /> + <circle cx="60" cy="60" r="25" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素はグローバル属性のみを含みます。</p> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイリング属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">利用ノート</h2> + +<p>{{svginfo}}</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", "struct.html#GElement", "<g>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Groups", "<g>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div class="hidden">このページの実装状況表は構造化されたデータから生成されたものです。もし、あなたがこのデータに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>を確認し、我々にプルリクエストを送って下さい。</div> + +<p>{{Compat("svg.elements.g")}}</p> diff --git a/files/ja/web/svg/element/hatchpath/index.html b/files/ja/web/svg/element/hatchpath/index.html new file mode 100644 index 0000000000..0b91496a8d --- /dev/null +++ b/files/ja/web/svg/element/hatchpath/index.html @@ -0,0 +1,72 @@ +--- +title: <hatchpath> +slug: Web/SVG/Element/hatchpath +tags: + - Element + - Experimental + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/hatchpath +--- +<div>{{SVGRef}}{{SeeCompatTable}}</div> + +<p><strong><code><hatchpath></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 {{SVGElement("hatch")}} 要素で使用されるハッチパスを定義します。</p> + +<h2 id="Usage_context" name="Usage_context">使用場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Global_event_attributes">グローバルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("offset")}}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGHatchpathElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[5] notranslate"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" + rotate="135"> + <hatchpath stroke="#a080ff" stroke-width="2"/> + </hatch> + </defs> + + <rect fill="url(#hatch)" stroke="black" stroke-width="2" + x="10%" y="10%" width="80%" height="80%" /> +</svg></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 200, 200)}}</p> + +<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.elements.hatchpath")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGElement("hatch")}}</li> +</ul> diff --git a/files/ja/web/svg/element/image/index.html b/files/ja/web/svg/element/image/index.html new file mode 100644 index 0000000000..874f1d59ac --- /dev/null +++ b/files/ja/web/svg/element/image/index.html @@ -0,0 +1,102 @@ +--- +title: <image> +slug: Web/SVG/Element/image +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/image +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">The <strong><code><image></code></strong> は SVG の要素で、 SVG 文書内に画像を含めます。これは{{glossary("raster image", "ラスター画像")}}ファイルや他の SVG ファイルを表示することができます。</span></p> + +<p>SVG ソフトウェアが対応する必要がある画像形式は {{glossary("JPEG")}}, {{glossary("PNG")}}, および他の SVG ファイルです。アニメーション {{glossary("GIF")}} の動作は未定義です。</p> + +<p><code><image></code> で表示される SVG ファイルは<a href="/ja/docs/Web/SVG/SVG_as_an_Image">画像として扱われます</a>。外部リソースは読み込まれず、 {{cssxref(":visited")}} のスタイルは<a href="/ja/docs/Web/CSS/Privacy_and_the_:visited_selector">適用されず</a>、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 {{SVGElement("use")}} を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 {{HTMLElement("object")}} を {{SVGElement("foreignObject")}} の中で使用してください。</p> + +<div class="note"> +<p><strong>注:</strong> HTML 仕様書は、解釈時に <code><image></code> を {{HTMLElement("img")}} の別名として定義しています。この仕様書の要素とその動作は SVG 文書または<a href="/ja/docs/SVG_In_HTML_Introduction">インライン SVG</a> 内のみのものです。</p> +</div> + +<h2 id="Usage_context" name="Usage_context">使用場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Xlink_attributes">Xlink 属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<ul> + <li>{{SVGAttr("x")}}: 原点から見た画像の水平位置です。</li> + <li>{{SVGAttr("y")}}: 原点から見た画像の垂直位置です。</li> + <li>{{SVGAttr("width")}}: 画像が描画される幅です。 HTML の <code><img></code> とは異なり、この属性は必須です。</li> + <li>{{SVGAttr("height")}}: 画像が描画される高さです。 HTML の <code><img></code> とは異なり、この属性は必須です。</li> + <li>{{SVGAttr("href")}} および {{SVGAttr("xlink:href")}}: 画像ファイルの URL を指します。</li> + <li>{{SVGAttr("preserveAspectRatio")}}: 画像の拡大縮小方法を制御し案す。</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p><code><image></code> は {{domxref("SVGImageElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>SVG 内における PNG 画像の基本的な描画:</p> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html notranslate"><svg width="200" height="200" + xmlns="http://www.w3.org/2000/svg"> + <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> +</svg> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 250, 260)}}</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', 'embedded.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td><code>height</code> および <code>width</code> を省略可能とした</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}</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.elements.image")}}</p> diff --git a/files/ja/web/svg/element/index.html b/files/ja/web/svg/element/index.html new file mode 100644 index 0000000000..d7373d9eac --- /dev/null +++ b/files/ja/web/svg/element/index.html @@ -0,0 +1,300 @@ +--- +title: SVG 要素リファレンス +slug: Web/SVG/Element +tags: + - Drawing + - Elements + - Responsive Design + - SVG + - SVG Reference + - SVG リファレンス + - Vector Graphics + - 'l10n:priority' + - ベクターグラフィック + - レスポンシブデザイン + - 描画 + - 要素 +translation_of: Web/SVG/Element +--- +<p>« <a href="/ja/docs/SVG">SVG</a> / <a href="/ja/docs/SVG/Attribute">SVG 属性リファレンス</a> »</p> + +<p><span class="seoSummary">SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。</span></p> + +<h2 id="SVG_elements_A_to_Z" name="SVG_elements_A_to_Z">SVG 要素 A - Z</h2> + +<div class="index"> +<h3 id="A">A</h3> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feDropShadow")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{SVGElement("g")}}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{SVGElement("view")}}</li> +</ul> +</div> + +<h2 id="SVG_elements_by_category" name="SVG_elements_by_category">SVG 要素一覧 (カテゴリー別)</h2> + +<h3 id="Animation_elements" name="Animation_elements">アニメーション要素</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Basic_shapes" name="Basic_shapes">基本シェイプ</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Container_elements" name="Container_elements">コンテナー要素</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Descriptive_elements" name="Descriptive_elements">説明的要素</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Filter_primitive_elements" name="Filter_primitive_elements">フィルター構成要素</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Font_elements" name="Font_elements">フォント要素</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Gradient_elements" name="Gradient_elements">グラデーション要素</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Graphics_elements" name="Graphics_elements">グラフィック要素</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="Graphics_referencing_elements" name="Graphics_referencing_elements">グラフィック参照要素</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="Light_source_elements" name="Light_source_elements">光源要素</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Never-rendered_elements" name="Never-rendered_elements">描画されない要素</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> + +<h3 id="Paint_server_elements" name="Paint_server_elements">ペイントサーバー要素</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Renderable_elements" name="Renderable_elements">描画可能要素</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p> + +<h3 id="Shape_elements" name="Shape_elements">図形要素</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Structural_elements" name="Structural_elements">構造的要素</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Text_content_elements" name="Text_content_elements">テキストコンテンツ要素</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Text_content_child_elements" name="Text_content_child_elements">テキストコンテンツの子要素</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Uncategorized_elements" name="Uncategorized_elements">未分類の要素</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> + +<h2 id="Obsolete_and_deprecated_elements" name="Obsolete_and_deprecated_elements">廃止および非推奨の要素</h2> + +<div class="blockIndicator warning"> +<p><strong>警告:</strong> 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。<strong>新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。</strong>ここに掲載しているのは情報提供だけの目的です。</p> +</div> + +<h3 id="A_2">A</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> + +<h3 id="C_2">C</h3> + +<p>{{SVGElement("cursor")}}</p> + +<h3 id="F_2">F</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> + +<h3 id="G_2">G</h3> + +<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> + +<h3 id="H_2">H</h3> + +<p>{{SVGElement("hkern")}}</p> + +<h3 id="M_2">M</h3> + +<p>{{SVGElement("missing-glyph")}}</p> + +<h3 id="T_2">T</h3> + +<p>{{SVGElement("tref")}}</p> + +<h3 id="V_2">V</h3> + +<p>{{SVGElement("vkern")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute">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> + +<p>{{SVGRef}}</p> diff --git a/files/ja/web/svg/element/line/index.html b/files/ja/web/svg/element/line/index.html new file mode 100644 index 0000000000..5446363585 --- /dev/null +++ b/files/ja/web/svg/element/line/index.html @@ -0,0 +1,106 @@ +--- +title: line +slug: Web/SVG/Element/line +tags: + - Element + - Reference + - SVG + - SVG Graphics + - 要素 +translation_of: Web/SVG/Element/line +--- +<div>{{SVGRef}}</div> + +<p><strong><code><line></code></strong> 要素は SVG の基本図形であり、2つの点をつなぐ直線を作成するために使用します。</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"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> + + <!-- If you do not specify the stroke + color the line will not be visible --> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{SVGAttr('x1')}}</dt> + <dd>線の始点の X 座標を定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <dt>{{SVGAttr('x2')}}</dt> + <dd>線の終点の X 座標を定義します。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <dt>{{SVGAttr('y1')}}</dt> + <dd>線の始点の Y 座標を定義します。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <dt>{{SVGAttr('y2')}}</dt> + <dd>線の終点の Y 座標を定義します。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <code>0</code>; <em>アニメーション</em>: <strong>可</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>パス全体の長さをユーザーの単位で定義します。<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>既定値</em>: <em>none</em>; <em>アニメーション</em>: <strong>可</strong></small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>主なもの: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件付き処理属性</a></dt> + <dd><small>主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>主なもの: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA 属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>{{svginfo}}</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#LineElement', '<line>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>x1、y1、x2、y2 属性に{{cssxref("<length>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}を指定できるように変更</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}</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.elements.line")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他の SVG 基本図形: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('polygon') }}, <strong>{{ SVGElement('polyline') }}</strong>, {{ SVGElement('rect') }}</li> +</ul> diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..123c6809c3 --- /dev/null +++ b/files/ja/web/svg/element/lineargradient/index.html @@ -0,0 +1,89 @@ +--- +title: linearGradient +slug: Web/SVG/Element/linearGradient +tags: + - Element + - SVG + - SVG Gradient +translation_of: Web/SVG/Element/linearGradient +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>linearGradient</code>要素はグラフィック要素の塗りまたは線への線形グラデーションを定義します。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3265/linearGradient.svg" title="https://developer.mozilla.org/files/3265/linearGradient.svg">linearGradient.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("gradientUnits") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この要素は <code><a href="/en/DOM/SVGLinearGradientElement" title="en/DOM/SVGLinearGradientElement">SVGLinearGradientElement</a></code> インターフェースを提供します。</p> + +<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', 'pservers.html#LinearGradientElement', '<linearGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.linearGradient")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("stop") }}</li> +</ul> diff --git a/files/ja/web/svg/element/mask/index.html b/files/ja/web/svg/element/mask/index.html new file mode 100644 index 0000000000..1bcca8da48 --- /dev/null +++ b/files/ja/web/svg/element/mask/index.html @@ -0,0 +1,112 @@ +--- +title: <mask> +slug: Web/SVG/Element/mask +tags: + - Element + - SVG + - SVG Container +translation_of: Web/SVG/Element/mask +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code><mask></code></strong> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the {{SVGAttr("mask")}} property.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="-10 -10 120 120"> + <mask id="myMask"> + <!-- Everything under a white pixel will be visible --> + <rect x="0" y="0" width="100" height="100" fill="white" /> + + <!-- Everything under a black pixel will be invisible --> + <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" /> + </mask> + + <polygon points="-10,110 110,110 110,-10" fill="orange" /> + + <!-- with this mask applied, we "punch" a heart shape hole into the circle --> + <circle cx="50" cy="50" r="50" mask="url(#myMask)" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("height")}}</dt> + <dd>This attribute defines the height of the masking area.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("maskContentUnits")}}</dt> + <dd>This attribute defines the coordinate system for the contents of the <code><mask></code>.<br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("maskUnits")}}</dt> + <dd>This attribute defines defines the coordinate system for attributes {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} and {{SVGAttr("height")}} on the <code><mask></code>.<br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("x")}}</dt> + <dd>This attribute defines the x-axis coordinate of the top-left corner of the masking area.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("y")}}</dt> + <dd>This attribute defines the y-axis coordinate of the top-left corner of the masking area.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Default value</em>: <code>-10%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("width")}}</dt> + <dd>This attribute defines the width of the masking area.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Default value</em>: <code>120%</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<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('CSS Masks', '#MaskElement', '<mask>')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性テーブルは構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("svg.elements.mask")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>Other clipping and masking SVG elements: {{SVGElement("clipPath")}}</li> + <li>Clipping and masking CSS properties: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}}</li> +</ul> diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..8925ae75ed --- /dev/null +++ b/files/ja/web/svg/element/metadata/index.html @@ -0,0 +1,64 @@ +--- +title: metadata +slug: Web/SVG/Element/metadata +tags: + - Element + - SVG + - SVG Descriptive +translation_of: Web/SVG/Element/metadata +--- +<div>{{SVGRef}}</div> + +<p>メタデータはデータに関する構造化データです。SVGコンテンツに含まれているメタデータは、 <code>metadata</code> 要素で指定する必要があります。 <code>metadata</code> 要素の内容はRDF,FOAFなどの他のXML名前空間からの要素でなければなりません。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<p><em>この要素には専用属性はありません。</em></p> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この要素は <code><a href="/en/DOM/SVGMetadataElement" title="en/DOM/SVGMetadataElement">SVGMetadataElement</a></code> インターフェースを提供します。</p> + +<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', 'struct.html#MetadataElement', '<metadata>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>グローバルイベント属性を許可。</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'metadata.html#MetadataElement', '<metadata>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.metadata")}}</p> diff --git a/files/ja/web/svg/element/mpath/index.html b/files/ja/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..00c5daa516 --- /dev/null +++ b/files/ja/web/svg/element/mpath/index.html @@ -0,0 +1,108 @@ +--- +title: <mpath> +slug: Web/SVG/Element/mpath +tags: + - SVGアニメーション + - リファレンス + - 要素 +translation_of: Web/SVG/Element/mpath +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p>{{ SVGElement("animateMotion") }}要素のmpath サブ要素は、外部の {{ SVGElement("path") }}要素をモーションパスの定義として参照する機能を提供します。</p> + +<h2 id="利用可能な場所">利用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 500 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <rect x="1" y="1" width="498" height="298" + fill="none" stroke="blue" stroke-width="2" /> + + <!-- Draw the outline of the motion path in blue, along + with three small circles at the start, middle and end. --> + <path id="path1" d="M100,250 C 100,50 400,50 400,250" + fill="none" stroke="blue" stroke-width="7.06" /> + <circle cx="100" cy="250" r="17.64" fill="blue" /> + <circle cx="250" cy="100" r="17.64" fill="blue" /> + <circle cx="400" cy="250" r="17.64" fill="blue" /> + + <!-- Here is a triangle which will be moved about the motion path. + It is defined with an upright orientation with the base of + the triangle centered horizontally just above the origin. --> + <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" + fill="yellow" stroke="red" stroke-width="7.06" > + <!-- Define the motion path animation --> + <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > + <mpath xlink:href="#path1"/> + </animateMotion> + </path> +</svg> +</pre> + +<p>出力結果:</p> + +<p>{{EmbedLiveSample("Example",250,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <code><a href="/en/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code> インターフェイスを提供します。</p> + +<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("SVG Animations 2", "#MPathElement", "<mpath>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.mpath")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("animateMotion") }}</li> +</ul> diff --git a/files/ja/web/svg/element/path/index.html b/files/ja/web/svg/element/path/index.html new file mode 100644 index 0000000000..45b6aaf7f8 --- /dev/null +++ b/files/ja/web/svg/element/path/index.html @@ -0,0 +1,107 @@ +--- +title: <path> +slug: Web/SVG/Element/path +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<p><strong><code><path></code></strong> <a href="/ja/docs/Web/SVG">SVG</a>要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。</p> + +<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2> + +<p>{{svginfo}}</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 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, 100)}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("d")}}</dt> + <dd>この属性は図形のパスを定義します。<br> + <small><em>値の型</em>: <strong><string></strong> ; <em>初期値</em>: <code>''</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>この属性は、ユーザ単位系でのパスの全長を指定することを可能にします。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>初期値</em>: <em>none</em>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="グローバル属性">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="利用ノート">利用ノート</h2> + +<p>{{svginfo}}</p> + +<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("SVG Paths", "#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG Paths")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div class="hidden">このページの実装状況表は、構造化されたデータから生成されています。もしこのデータに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>を確認し、我々にプルリクエストを送って下さい。</div> + +<p>{{Compat("svg.elements.path")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>SVG基本図形: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> + <li><a href="/ja/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" チュートリアル : Path</a></li> +</ul> diff --git a/files/ja/web/svg/element/pattern/index.html b/files/ja/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..adf33d7f5e --- /dev/null +++ b/files/ja/web/svg/element/pattern/index.html @@ -0,0 +1,120 @@ +--- +title: <pattern> +slug: Web/SVG/Element/pattern +translation_of: Web/SVG/Element/pattern +--- +<div>{{SVGRef}}</div> + +<p><strong><code><pattern></code></strong>要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます．</p> + +<p><code><pattern></code>は他の<a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">graphics elements</a>の{{SVGAttr("fill")}}または{{SVGAttr("stroke")}}属性として参照されることが可能です．</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> + + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>This attribute determines the height of the pattern tile.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternContentUnits")}}</dt> + <dd>This attribute defines the coordinate system for the contents of the {{ SVGElement("pattern") }}.<br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Note:</strong> This attribute has no effect if a <code>viewBox</code> attribute is specified on the <code><pattern></code> element.</p> + </dd> + <dt>{{SVGAttr("patternTransform")}}</dt> + <dd>This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternUnits")}}</dt> + <dd>This attribute defines the coordinate system for attributes <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code>.<br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd>This attribute defines the bound of the SVG viewport for the pattern fragment.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>This attribute determines the width of the pattern tile.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>This attribute determines the x coordinate shift of the pattern tile.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>This attribute reference a template pattern that provides default values for the <code><pattern></code> attributes.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Note:</strong> For browsers implementing <code>href</code>, if both <code>href</code> and <code>xlink:href</code> are set, <code>xlink:href</code> will be ignored and only <code>href</code> will be used.</p> + </dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>This attribute determines the y coordinate shift of the pattern tile.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="グローバル属性">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</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('SVG2', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.pattern")}}</p> diff --git a/files/ja/web/svg/element/polygon/index.html b/files/ja/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..524d9c87fb --- /dev/null +++ b/files/ja/web/svg/element/polygon/index.html @@ -0,0 +1,88 @@ +--- +title: polygon +slug: Web/SVG/Element/polygon +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p><strong><code><polygon></code></strong>要素は、直線のセグメントのつながりで構成された閉じた図形を定義します。最後の点は最初の点と結ばれます。開いた図形については{{SVGElement("polyline")}}要素をご覧ください。</p> + +<h2 id="使える場所">使える場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性 </a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{SVGAttr("points")}}</li> +</ul> + +<h2 id="DOMインターフェイス">DOMインターフェイス</h2> + +<p>この要素は{{domxref("SVGPolygonElement")}}インタフェースを実装します。</p> + +<h2 id="例">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/> +</svg></pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}<br> +» <a href="https://developer.mozilla.org/files/3259/polygon.svg">polygon.svg</a></p> + +<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', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.polygon")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{SVGElement("polyline")}}</li> +</ul> diff --git a/files/ja/web/svg/element/polyline/index.html b/files/ja/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..e093dce2fd --- /dev/null +++ b/files/ja/web/svg/element/polyline/index.html @@ -0,0 +1,85 @@ +--- +title: polyline +slug: Web/SVG/Element/polyline +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/polyline +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>polyline</code>要素はSVGの基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的に<code>polyline要素は開いた図形を生成する際に使用します。</code></p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<p>» <a href="https://developer.mozilla.org/files/3260/polyline.svg" title="https://developer.mozilla.org/files/3260/polyline.svg">polyline.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("points") }}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <code><a href="/en/DOM/SVGPolylineElement" title="en/DOM/SVGPolylineElement">SVGPolylineElement</a></code> インターフェイスを提供します。</p> + +<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', 'shapes.html#PolylineElement', '<polyline>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.polyline")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("polygon") }}</li> +</ul> diff --git a/files/ja/web/svg/element/radialgradient/index.html b/files/ja/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..b617afb4fb --- /dev/null +++ b/files/ja/web/svg/element/radialgradient/index.html @@ -0,0 +1,107 @@ +--- +title: radialGradient +slug: Web/SVG/Element/radialGradient +tags: + - Element + - SVG + - SVG Gradient +translation_of: Web/SVG/Element/radialGradient +--- +<div>{{SVGRef}}</div> + +<p><code>radialGradient</code>要素はグラフィックス要素の塗りまたは線への放射状グラデーションを定義します。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("gradientUnits") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> + <li>{{ SVGAttr("fr") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この要素は <code><a href="/ja/DOM/SVGRadialGradientElement" title="/ja/DOM/SVGRadialGradientElement">SVGRadialGradientElement</a></code> インターフェースを提供します。</p> + +<h2 id="例">例</h2> + +<h3 id="SVG">SVG</h3> + +<div id="Example"> +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <radialGradient id="exampleGradient"> + <stop offset="10%" stop-color="gold"/> + <stop offset="95%" stop-color="green"/> + </radialGradient> + </defs> + + <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/> +</svg></pre> +</div> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</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', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td><code>fr</code> 属性の追加</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("svg.elements.radialGradient")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("linearGradient") }}</li> +</ul> diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html new file mode 100644 index 0000000000..2a6e95ee9e --- /dev/null +++ b/files/ja/web/svg/element/rect/index.html @@ -0,0 +1,95 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>rect</code> 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。</p> + +<h2 id="例">例</h2> + +<h3 id="シンプルな_rect_要素の使い方">シンプルな <code>rect 要素の使い方</code></h3> + +<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="角の丸い_rect_要素"><code>角の丸い rect</code> 要素</h3> + +<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent" title="ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> インターフェイスを提供します。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<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', 'shapes.html#RectElement', '<rect>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '<rect>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.rect")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/ja/web/svg/element/script/index.html b/files/ja/web/svg/element/script/index.html new file mode 100644 index 0000000000..88138ee018 --- /dev/null +++ b/files/ja/web/svg/element/script/index.html @@ -0,0 +1,107 @@ +--- +title: <script> +slug: Web/SVG/Element/script +tags: + - Element + - Reference + - SVG +translation_of: Web/SVG/Element/script +--- +<p>SVG <code>script</code> 要素は、HTML の <a href="/ja/HTML/Element/Script"><code>script</code></a> 要素と同じく、 スクリプト（例えば ECMAScript）を設置するための場所です。</p> + +<p>すべての <code>script</code> 要素内で定義されたすべての関数は、現在のドキュメント全体でグローバルスコープを持っています。</p> + +<h2 id="利用可能な場所">利用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<p>次のコードスニペットは、SVG の <code>script</code> タグの使用方法を示します。このコードでは、SVG {{SVGElement("circle")}} 要素の半径を変更するために JavaScript を使用します。</p> + +<pre class="brush: html notranslate"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <script type="text/javascript"> + // <![CDATA[ + function change(evt) { + var target = evt.target; + var radius = target.getAttribute("r"); + + if (radius == 15) { + radius = 45; + } else { + radius = 15; + } + + target.setAttribute("r",radius); + } + // ]]> + </script> + + <circle cx="50" cy="50" r="45" fill="green" + onclick="change(evt)" /> +</svg> +</pre> + +<p>結果:</p> + +<p>{{EmbedLiveSample("Example",150,165)}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/SVG/Attribute#XLink">Xlink 属性</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{SVGAttr("type")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は <code><a href="/ja/DOM/SVGScriptElement">SVGScriptElement</a></code> インターフェイスを実装します。</p> + +<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', 'interact.html#ScriptElement', '<script>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'script.html#ScriptElement', '<script>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.script")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>HTML の <a href="/ja/HTML/Element/Script"><code>script</code> 要素</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/ja/web/svg/element/set/index.html b/files/ja/web/svg/element/set/index.html new file mode 100644 index 0000000000..0f2373d15b --- /dev/null +++ b/files/ja/web/svg/element/set/index.html @@ -0,0 +1,81 @@ +--- +title: set +slug: Web/SVG/Element/set +tags: + - Element + - NeedsExample + - SVG + - SVG Animation +translation_of: Web/SVG/Element/set +--- +<div>{{SVGRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>set</code> 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に補間することができないものも含みます。例えば、文字列や論理型といった値です。<code>set</code> 要素は非加算的要素です。additive 属性とaccumulate 属性は許可されておらず、指定されても無視されます。</p> + +<h2 id="使用可能な場所">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="例">例</h2> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<ul> + <li>{{ SVGAttr("to") }}</li> +</ul> + +<h2 id="DOM_インターフェース">DOM インターフェース</h2> + +<p>この要素は <code><a href="/en/DOM/SVGSetElement" title="en/DOM/SVGSetElement">SVGSetElement</a></code> インターフェースを提供します。</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("SVG Animations 2", "#SetElement", "<set>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#SetElement', '<set>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>最初の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.set")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{ SVGElement("animate") }}</li> +</ul> diff --git a/files/ja/web/svg/element/solidcolor/index.html b/files/ja/web/svg/element/solidcolor/index.html new file mode 100644 index 0000000000..ad7be1eee8 --- /dev/null +++ b/files/ja/web/svg/element/solidcolor/index.html @@ -0,0 +1,85 @@ +--- +title: <solidcolor> +slug: Web/SVG/Element/solidColor +tags: + - Element + - Experimental + - Reference + - SVG +translation_of: Web/SVG/Element/solidColor +--- +<div>{{SVGRef}}{{obsolete_header}}</div> + +<p class="seoSummary"><strong><code><solidcolor></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。</p> + +<p class="note"><strong>注:</strong> これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <code><solidcolor></code> とは異なり、それ自身をグラデーションの定義に使用することができません。</p> + +<h2 id="Usage_context" name="Usage_context">使用場面</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/API/GlobalEventHandlers">グローバルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<p><em>なし。</em></p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150"> + <defs> + <!-- solidColor is experimental. --> + <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/> + + <!-- linearGradient with a single color stop is a less elegant way to + achieve the same effect, but it works in current browsers. --> + <linearGradient id="myGradient"> + <stop offset="0" stop-color="green" /> + </linearGradient> + </defs> + + <text x="10" y="20">Circles colored with solidColor</text> + <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)" + fill="white"/> + <circle cx="50" cy="65" r="35" fill="url(#myColor)"/> + + <text x="10" y="120">Circles colored with linearGradient</text> + <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)" + fill="white"/> + <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/> +</svg> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<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.elements.solidcolor")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("SVGSolidcolorElement")}}</li> + <li>{{cssxref("solid-color")}}</li> + <li>{{cssxref("solid-opacity")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> diff --git a/files/ja/web/svg/element/svg/index.html b/files/ja/web/svg/element/svg/index.html new file mode 100644 index 0000000000..0bf190c3f7 --- /dev/null +++ b/files/ja/web/svg/element/svg/index.html @@ -0,0 +1,125 @@ +--- +title: svg +slug: Web/SVG/Element/svg +tags: + - Element + - Reference + - SVG + - SVG Container + - Web +translation_of: Web/SVG/Element/svg +--- +<p>{{SVGRef}}</p> + +<p><code>svg</code> 要素は、新しい座標系と<a href="/ja/docs/Web/SVG/Attribute/viewBox">ビューポート</a>を定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。</p> + +<div class="note"> +<p><strong>注意:</strong> <code>xmlns</code> 属性は <em>SVG ドキュメント</em>の最も外側の <code>svg</code> 要素にのみ必要です。内部の <code>svg</code> 要素や HTML 文書の内部には不要です。</p> +</div> + +<div id="Exeemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> + <circle cx="50" cy="50" r="40" /> + <circle cx="150" cy="50" r="4" /> + + <svg viewBox="0 0 10 10" x="200" width="100"> + <circle cx="5" cy="5" r="4" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p> +</div> + +<h2 id="Atributes" name="Atributes">属性</h2> + +<dl> + <dt>{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}</dt> + <dd>文書が要求する最小のSVG言語プロファイル<br> + <small><em>値の型</em>: <strong><string></strong> ; <em>初期値</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}</dt> + <dd>SVGフラグメントで用いられる初期記述言語<br> + <small><em>値の型</em>: <strong><string></strong> ; <em>初期値</em>: <code>application/ecmascript</code>; <em>アニメーション可否</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}</dt> + <dd>SVGフラグメントで用いられる初期のスタイルシート言語<br> + <small><em>値の型</em>: <strong><string></strong> ; <em>初期値</em>: <code>text/css</code>; <em>アニメーション可否</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd>矩形ビューポートで表示される高さ (それ自身の座標系の高さではありません)<br> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>初期値</em>: <code>auto</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>異なるアスペクト比での表示時に、<code>svg</code>フラグメントがどう変形されるか<br> + <small><em>値の型</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>初期値</em>: <code>xMidYMid meet</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("version")}} {{deprecated_inline('svg2')}}</dt> + <dd>要素内の内容にどのバージョンのSVGが用いられるか<br> + <small><em>値の型</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#Number"><number></a></strong> ; <em>初期値</em>: none; <em>アニメーション可否</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd>The SVG viewport coordinates for the current SVG fragment.<br> + <small><em>値の型</em>: <strong><a href="/ja/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>初期値</em>: none; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>矩形ビューポートで表示される幅 (それ自身の座標系の幅ではありません)<br> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>初期値</em>: <code>auto</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>SVGコンテナが表示されるx座標。最も外側の<code>SVG</code>要素では効果ありません。<br> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>初期値</em>: <code>0</code>; <em>アニメーション可否</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>SVGコンテナが表示されるy座標。最も外側の<code>SVG</code>要素では効果ありません。<br> + <small><em>値の型</em>: <a href="/ja/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/ja/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>初期値</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>注意:</strong> SVG2で開始する場合には、<code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> は、<em>ジオメトリプロパティ</em>です。これは、これらの属性がCSSプロパティとして用いられることを意味します。</p> +</div> + +<h3 id="グローバル属性">グローバル属性</h3> + +<dl> + <dt><a href="/ja/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/ja/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィカルイベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">文書イベント属性</a>, <a href="/ja/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">文書要素イベント属性</a></small></dd> + <dt><a href="/ja/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>{{svginfo}}</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', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの実装状況">ブラウザの実装状況</h2> + +<div class="hidden">このページの実装状況表は構造化されたデータから生成されています。もし、あなたがこのデータに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>を確認し、我々にプルリクエストを送って下さい。</div> + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/ja/web/svg/element/switch/index.html b/files/ja/web/svg/element/switch/index.html new file mode 100644 index 0000000000..9c0386d930 --- /dev/null +++ b/files/ja/web/svg/element/switch/index.html @@ -0,0 +1,98 @@ +--- +title: <switch> +slug: Web/SVG/Element/switch +tags: + - Element + - NeedsExample + - SVG + - SVG Container + - SVG コンテナー + - 要素 +translation_of: Web/SVG/Element/switch +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary"><strong><code><switch></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、その直接の子要素の {{SVGAttr("requiredFeatures")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("systemLanguage")}} 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。</span>他の直接の子要素はバイパスされ、描画されません。子要素が {{SVGElement("g")}} のようなコンテナー要素であった場合、そのサブツリーも処理されたり描画されたりするか、バイパスされたり描画されなかったりします。</p> + +<div class="blockIndicator note"> +<p><code>display</code> および <code>visibility</code> プロパティは、 <code><switch></code> 要素の処理には何の影響もありません。特に、子に <code>display:none</code> を設定しても、 <code><switch></code> 処理の真偽テストには影響しません。</p> +</div> + +<h2 id="Usage_context" name="Usage_context">使用コンテキスト</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィックイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGSwitchElement")}} インターフェイスを実装しています。</p> + +<h2 id="SVG_switch_example" name="SVG_switch_example">SVG <switch> の例</h2> + +<p>この例は、ブラウザーの言語設定に応じて異なるテキストコンテンツを表示する方法を示しています。 <code>switch</code> 要素は、 <code>systemLanguage</code> 属性がユーザーの言語に一致する子要素の最初のものを表示し、どれも一致しない場合は、 <code>systemLanguage</code> 属性を持たないフォールバック要素を表示します。</p> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><svg viewBox="0 -20 100 50"> + <switch> + <text systemLanguage="ar">مرحبا</text> + <text systemLanguage="de,nl">Hallo!</text> + <text systemLanguage="en-us">Howdy!</text> + <text systemLanguage="en-gb">Wotcha!</text> + <text systemLanguage="en-au">G'day!</text> + <text systemLanguage="en">Hello!</text> + <text systemLanguage="es">Hola!</text> + <text systemLanguage="fr">Bonjour!</text> + <text systemLanguage="ja">こんにちは</text> + <text systemLanguage="ru">Привет!</text> + <text>☺</text> + </switch> +</svg></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('SVG_switch_example') }}</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', 'struct.html#SwitchElement', '<switch>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>{{SVGAttr("systemLanguage")}} 属性の評価を明確にしました。</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#SwitchElement', '<switch>')}}</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.elements.switch")}}</p> diff --git a/files/ja/web/svg/element/text/index.html b/files/ja/web/svg/element/text/index.html new file mode 100644 index 0000000000..5c42559230 --- /dev/null +++ b/files/ja/web/svg/element/text/index.html @@ -0,0 +1,159 @@ +--- +title: <text> +slug: Web/SVG/Element/text +tags: + - Element + - Reference + - SVG + - SVG Text Content +translation_of: Web/SVG/Element/text +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">SVG <strong><code><text></code></strong> 要素は、テキストからなるグラフィクス要素を定義します。<code><text></code> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。</span></p> + +<p>SVG 内でテキストが <code><text></code> 要素内以外で組み込まれた場合、レンダリングされません。これはデフォルトで隠されるのとは違い、<a href="/docs/Web/SVG/Attribute/display">ディスプレイプロパティ</a> を変更してもテキストは表示されません。</p> + +<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/docs/Web/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Core_attributes">コア属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a> »</li> + <li><a href="/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">専用属性</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGTextElement")}} インターフェイスを実装します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_text_usage" name="Basic_text_usage">基本的なテキストの使用例</h3> + +<h4 id="SVG">SVG</h4> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" + width="500" height="40" viewBox="0 0 500 40"> + + <text x="0" y="35" font-family="Verdana" font-size="35"> + Hello, out there + </text> +</svg></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Basic_text_usage", 500, 60)}}</p> + +<h3 id="Rotated_text" name="Rotated_text">回転テキスト</h3> + +<p>SVG テキストは回転することができます。</p> + +<h4 id="SVG_2">SVG</h4> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="180" height="120"> + <text x="0" y="20" transform="rotate(30 20,40)"> + SVG Text Rotation example + </text> +</svg></pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Rotated_text", 180, 120)}}</p> + +<h3 id="Colored_text" name="Colored_text">着色テキスト</h3> + +<p>SVG テキストは着色することができます。</p> + +<h4 id="SVG_3">SVG</h4> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="30"> + <text x="10" y="20" stroke="none" fill="red"> + SVG Colored Text + </text> +</svg></pre> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{EmbedLiveSample("Colored_text", 200, 30)}}</p> + +<h3 id="Styling_text_via_CSS" name="Styling_text_via_CSS">CSS を用いたテキストのスタイリング</h3> + +<p>SVG テキストは HTML テキストのようにスタイリングできます。</p> + +<h4 id="SVG_4">SVG</h4> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="60"> + <text x="10" y="40" + style="font-family: Times New Roman; + font-size: 44px; + stroke: #00ff00; + fill: #0000ff;"> + SVG text styling + </text> +</svg></pre> + +<h4 id="Result_4" name="Result_4">結果</h4> + +<p>{{EmbedLiveSample("Styling_text_via_CSS", 400, 60)}}</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', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.text")}}</p> + +<h2 id="Related" name="Related">関連情報</h2> + +<ul> + <li>{{SVGElement("tspan")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("altGlyph")}}</li> +</ul> diff --git a/files/ja/web/svg/element/title/index.html b/files/ja/web/svg/element/title/index.html new file mode 100644 index 0000000000..604da60a74 --- /dev/null +++ b/files/ja/web/svg/element/title/index.html @@ -0,0 +1,84 @@ +--- +title: title +slug: Web/SVG/Element/title +tags: + - Element + - Reference + - SVG + - SVG Descriptive +translation_of: Web/SVG/Element/title +--- +<div>{{SVGRef}}</div> + +<p>SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む <strong><code><title></code></strong> 要素を供給することができます。文書フラグメントがSVG視覚メディアとしてレンダリングされるとき、<code><title></code> 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして <code><title></code>要素を表示するかもしれません。 <code><title></code> 要素を表示するが <code>path</code> 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。<code><title></code> 要素は一般に SVG 文書のアクセシビリティを向上させます。</p> + +<p>一般に、<code><title></code> 要素は その <code><title></code> 要素の親の最初の子にするべきです。 <code><title></code>が実際にその <code><title></code> の親の最初の子要素である場合、ツールチップを表示するためにタイトルを使用する実装のみが表示することに注意してください。</p> + +<h2 id="利用可能な場所">利用可能な場所</h2> + +<p>{{svginfo}}</p> + +<h2 id="属性">属性</h2> + +<h3 id="グローバル属性">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="専用属性">専用属性</h3> + +<p><em>この要素には専用属性はありません。</em></p> + +<h2 id="DOM_インターフェイス">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGTitleElement")}} インターフェイスを実装します。</p> + +<h2 id="例">例</h2> + +<pre class="brush: xml"><svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> + <g> + <title>SVG Title Demo example</title> + <rect x="10" y="10" width="200" height="50" + style="fill:none; stroke:blue; stroke-width:1px"/> + </g> +</svg> +</pre> + +<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', 'struct.html#TitleElement', '<title>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("svg.elements.title")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{SVGElement("desc")}}</li> +</ul> diff --git a/files/ja/web/svg/element/tspan/index.html b/files/ja/web/svg/element/tspan/index.html new file mode 100644 index 0000000000..975eac0195 --- /dev/null +++ b/files/ja/web/svg/element/tspan/index.html @@ -0,0 +1,111 @@ +--- +title: <tspan> +slug: Web/SVG/Element/tspan +tags: + - Element + - Reference + - SVG + - SVG Text Content +translation_of: Web/SVG/Element/tspan +--- +<div>{{SVGRef}}</div> + +<p>SVG の <code><strong><tspan></strong></code> 要素は、 {{SVGElement('text')}} 要素内にあるサブテキストやその他の <code><tspan></code> 要素を定義します。これにより、必要に応じてサブテキストのスタイルや位置を調整することができます。</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[9] notranslate"><svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> + <style> + text { font: italic 12px serif; } + tspan { font: bold 10px sans-serif; fill: red; } + </style> + + <text x="10" y="30" class="small"> + You are + <tspan>not</tspan> + a banana! + </text> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{SVGAttr("x")}}</dt> + <dd>テキストのベースラインの開始点の X 座標です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>テキストのベースラインの開始点の Y 座標です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("dx")}}</dt> + <dd>テキストの位置を直前のテキスト要素から水平方向にずらします。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("dy")}}</dt> + <dd>テキストの位置を直前のテキスト要素から垂直方向にずらします。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("rotate")}}</dt> + <dd>それぞれの文字の向きを回転します。文字ごとに個別に回転させることができます。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#List-of-Ts"><strong><list-of-number></strong></a> ; <em>既定値</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("lengthAdjust")}}</dt> + <dd>テキストを<code>textLength</code> 属性で定義された幅に合わせるために伸縮する方法です。<br> + <small><em>値の型</em>: <code>spacing</code>|<code>spacingAndGlyphs</code>; <em>既定値</em>: <code>spacing</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("textLength")}}</dt> + <dd>テキストを伸縮して合わせる幅です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>既定値</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('dominant-baseline')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{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("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria 属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_context" name="Usage_context">使用場面</h2> + +<p>{{svginfo}}</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', 'text.html#TextElement', '<tspan>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}}</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.elements.tspan")}}</p> diff --git a/files/ja/web/svg/element/use/index.html b/files/ja/web/svg/element/use/index.html new file mode 100644 index 0000000000..3507e70c92 --- /dev/null +++ b/files/ja/web/svg/element/use/index.html @@ -0,0 +1,129 @@ +--- +title: <use> +slug: Web/SVG/Element/use +tags: + - Element + - Reference + - SVG + - SVG Graphics +translation_of: Web/SVG/Element/use +--- +<div>{{SVGRef}}</div> + +<p><strong><code><use></code></strong> 要素は SVG 文書の中からノード取り出して、別の場所に複製します。</p> + +<div id="Example"> +<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"> + <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> + <use href="#myCircle" x="10" fill="blue"/> + <use href="#myCircle" x="20" fill="white" stroke="red"/> + <!-- +stroke="red" will be ignored here, as stroke was already set on myCircle. +Most attributes (except for x, y, width, height and (xlink:)href) +do not override those set in the ancestor. +That's why the circles have different x positions, but the same stroke value. + --> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<p>効果は、あたかもそのノードが非公開の DOM に配下を含めて複製され、 HTML5 の <a href="/ja/docs/Web/HTML/Element/template">template 要素</a>のように、 <code>use</code> 要素がある場所に貼り付けられたかのように同じになります。</p> + +<p><code>use</code> のほとんどの属性は、 <code>use</code> から<em>参照</em>される要素に既にある属性を上書きしません。 (これは CSS のスタイル属性がカスケードで「以前」に設定されたものを上書きする方法とは異なります)。 <code>use</code> 要素にある{{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}}, {{SVGAttr("href")}} の各属性<strong>のみ</strong>が参照される要素に設定されているものを上書きします。ただし、参照される要素に設定されていない<em>他のすべての属性</em>は、 <code>use</code> 要素に適用されます。</p> + +<p>クローンされたノードは公開されないので、 <a href="/ja/docs/Web/CSS">CSS</a> を使って <code>use</code> 要素とその隠れた子孫要素にスタイル付けをする場合は注意が必要です。<a href="/ja/docs/Web/CSS/inheritance">CSS の継承</a>を使用して明示的に要求しない限り、CSS 属性は隠された複製の DOM によって継承されることが保証されません。</p> + +<p>セキュリティ上の理由で、ブラウザーは<a href="/en-US/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>を <code>use</code> 要素に適用して、 {{SVGAttr("href")}} 属性にあるオリジンをまたがる URL を読み込むことを拒否することがあります。現在のところ、 <code>use</code> 要素のふぉういつオリジンポリシーを設定する方法は定義されていません。</p> + +<div class="warning"> +<p>SVG 2 で {{SVGAttr("xlink:href")}} 属性が非推奨になり、 {{SVGAttr("href")}} に置き換えられました。詳しくは {{SVGAttr("xlink:href")}} のページを参照してください。ただし、 {{SVGAttr("xlink:href")}} はブラウザー間の互換性のために今でも実装する必要があります (下記の<a href="#Browser_compatibility">互換性一覧表</a>を参照)。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("href")}}</dt> + <dd>複製する必要がある要素やフラグメントへの URL です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a> ; <em>既定値</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt> + <dd>{{Deprecated_Header("SVG2")}}複製する必要がある要素やフラグメントの <a href="/en/SVG/Content_type#IRI"><IRI></a> 参照です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#IRI"><strong><IRI></strong></a> ; <em>既定値</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>この use 要素の X 座標です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>既定値</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-cy">{{SVGAttr("y")}}</dt> + <dd>この use 要素の Y 座標です。<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>既定値</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt id="attr-r">{{SVGAttr("width")}}</dt> + <dd>The width of the use element.<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>既定値</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd>The height of the use element.<br> + <small><em>値の型</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>既定値</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> <code>width</code> および <code>height</code> は <code>use</code> 要素では効果がありません。ただし、参照される要素に <a href="/ja/docs/Web/SVG/Attribute/viewBox">viewbox</a> がある場合を除きます。 - すなわｔ、 <code>use</code> が <code>svg</code> または <code>symbol</code> 要素を参照していた時だけ効果があります。</p> +</div> + +<div class="note"> +<p><strong>注:</strong> SVG2 から、 <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> は<em>位置プロパティ</em>となり、すなわちこれらの属性がその要素への CSS プロパティとしても使用することができるようになりました。</p> +</div> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">コア属性</a></dt> + <dd><small>特に: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">スタイル属性</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">条件処理属性</a></dt> + <dd><small>特に: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>イベント属性</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">グローバルイベント属性</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">グラフィックイベント属性</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">プレゼンテーション属性</a></dt> + <dd><small>特に: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA 属性</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> + <dt>XLink 属性</dt> + <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>{{svginfo}}</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', 'struct.html#UseElement', '<use>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}</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.elements.use")}}</p> diff --git a/files/ja/web/svg/index.html b/files/ja/web/svg/index.html new file mode 100644 index 0000000000..2705233146 --- /dev/null +++ b/files/ja/web/svg/index.html @@ -0,0 +1,101 @@ +--- +title: 'SVG: Scalable Vector Graphics' +slug: Web/SVG +tags: + - 2D Graphics + - Graphics + - Icons + - Images + - References + - Responsive Design + - SVG + - Scalable Graphics + - Scalable Images + - Vector Graphics + - Web + - 'l10n:priority' +translation_of: Web/SVG +--- +<div>{{SVGRef}}</div> + +<div class="callout-box"><strong><a href="/ja/docs/SVG/Tutorial">始めよう</a></strong><br> +このチュートリアルは、 SVG を使い始めるのに役立つでしょう。</div> + +<p class="summary" style="border-top-width: 0; padding-top: 0;"><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> は、二次元ベースの<a class="external" href="https://ja.wikipedia.org/wiki/ベクタ形式">ベクター形式</a>のための <a href="/ja/docs/XML" title="XML">XML</a> に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば <a href="/ja/docs/CSS">CSS</a>, <a href="/ja/docs/DOM">DOM</a>, <a href="/ja/docs/Web/JavaScript">JavaScript</a>, <a href="/ja/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a> などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する <a href="/ja/docs/Web/HTML">HTML</a> のような位置づけです。</span></p> + +<p>SVG 画像と関連する振る舞いは <span class="seoSummary"><a href="/en-US/docs/XML">XML</a></span> のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。</p> + +<p>旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。</p> + +<p>SVG は1999年から <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> によって開発されています。</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">ドキュメント</h2> + +<dl> + <dt><a href="/ja/docs/Web/SVG/Element" title="SVG/Element">SVG 要素リファレンス</a></dt> + <dd>各 SVG 要素についての詳細情報です。</dd> + <dt><a href="/ja/docs/Web/SVG/Attribute" title="SVG/Attribute">SVG 属性リファレンス</a></dt> + <dd>各 SVG 属性の詳細情報です。</dd> + <dt><a href="/ja/docs/Web/API/Document_Object_Model#SVG_interfaces">SVG DOM インターフェイスリファレンス</a></dt> + <dd>JavaScript と連携するための SVG DOM API の詳細情報です。</dd> + <dt><a href="/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML コンテンツへ SVG 効果を適用する</a></dt> + <dd>SVG は {{Glossary("HTML")}}、{{Glossary("CSS")}} と {{Glossary("JavaScript")}} と連携して動作します。SVG を使用することで、<a href="/ja/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">通常の HTML ページや Web アプリケーションを拡張</a>できます。</dd> +</dl> + +<p><span class="alllinks"><a href="/ja/docs/tag/SVG">すべて表示...</a></span></p> + +<h2 class="Community" id="Community" name="Community">コミュニティ</h2> + +<ul> + <li>Mozilla のフォーラムを見る... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools">ツール</h2> + +<ul> + <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG テストスイート</a></li> + <li><a href="https://validator.w3.org/#validate_by_input">Markup Validator</a></li> + <li><a href="/ja/docs/tag/SVG:Tools">その他のツール...</a></li> + <li>その他のリソース: <a href="/ja/docs/XML">XML</a>, <a href="/ja/docs/CSS">CSS</a>, <a href="/ja/docs/DOM">DOM</a>, <a href="/ja/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Examples" name="Examples">例</h2> + +<ul> + <li>Google <a class="external" href="http://maps.google.com">マップ</a> (経路のオーバーレイ) と <a href="http://docs.google.com">Docs</a> (spreadsheet のグラフ)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG 作成のガイドライン</a></li> + <li><a href="/ja/docs/Mozilla_SVG_Project">Mozilla SVG プロジェクト</a>の概要</li> + <li>SVG と Mozilla についての<a class="internal" href="/ja/docs/SVG/FAQ">よくある質問</a></li> + <li><a href="/ja/docs/SVG/SVG_as_an_Image">画像としての SVG</a></li> + <li><a href="/ja/docs/SVG/SVG_animation_with_SMIL">SMIL を用いた SVG のアニメーション</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> +</ul> + +<h3 id="Animation_and_interactions" name="Animation_and_interactions">アニメーションとインタラクション</h3> + +<p>HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からアクセスが可能です。これを利用することで、開発者はリッチなアニメーションやインタラクティブな画像を制作できます。</p> + +<ul> + <li><a class="external" href="http://svg-wow.org/">svg-wow.org</a> に掲載されている、見て楽しむ SVG</li> + <li>Firefox の拡張機能 (<a href="http://schepers.cc/grafox/">Grafox</a>) は、{{Glossary("SMIL")}} アニメーションサポートのサブセットを追加します</li> + <li>インタラクティブな<a href="http://demo.huihoo.com/amplesdk/examples/applications/svgalbum/index.html">写真</a>の操作</li> + <li>SVG の <code>foreignObject</code> の利用による <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a></li> +</ul> + +<h3 id="Mapping_charting_games_3D_experiments" name="Mapping_charting_games_3D_experiments">地図、グラフ、ゲームおよび 3D の実験</h3> + +<p>SVG をほんの少し利用するだけでも、ウェブコンテンツを格段に向上させることができます。以下に挙げるのは、SVG を本格的に使用した例です。</p> + +<ul> + <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="元リンク先が要認証となったので、アーカイブへのリンクを示します。">Connect 4</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (データ視覚化用の双方向マップ)</li> + <li><a href="http://jointjs.com">JointJS</a> (JavaScript ダイアグラムライブラリ)</li> + <li><a href="https://d3js.org">D3</a> (HTML、 SVG、 CSS を視覚化する JavaScript ライブラリ)</li> +</ul> +</div> +</div> diff --git a/files/ja/web/svg/index/index.html b/files/ja/web/svg/index/index.html new file mode 100644 index 0000000000..84bc4161f7 --- /dev/null +++ b/files/ja/web/svg/index/index.html @@ -0,0 +1,9 @@ +--- +title: SVG 関連ドキュメントの索引 +slug: Web/SVG/Index +tags: + - Index + - SVG +translation_of: Web/SVG/Index +--- +<p>{{Index("/ja/docs/Web/SVG")}}</p> diff --git a/files/ja/web/svg/namespaces_crash_course/example/index.html b/files/ja/web/svg/namespaces_crash_course/example/index.html new file mode 100644 index 0000000000..1a99e4cafa --- /dev/null +++ b/files/ja/web/svg/namespaces_crash_course/example/index.html @@ -0,0 +1,302 @@ +--- +title: 例 +slug: Web/SVG/Namespaces_Crash_Course/Example +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course/Example +--- +<p>この例で、私達は <a href="/ja/docs/XHTML">XHTML</a> 、 <a href="/ja/docs/Web/SVG">SVG</a> 、 <a href="/ja/docs/Web/JavaScript">JavaScript</a> と <a href="/ja/docs/DOM">DOM</a> 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。</p> +<p>これは完全に Flash やその他のベンダ特有の拡張を用いずに、 W3C 標準- XHTML と SVG と JavaScript で実現されています。これは Firefox 1.5 以上で動作します。</p> +<p><a class="internal button liveSample" href="http://developer.mozilla.org/samples/svg/swarm-of-motes.xhtml">実行例を表示</a></p> +<pre class="brush:xml"><?xml version='1.0'?> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>ほこりの群</title> + <style type='text/css'> + <![CDATA[ + label, input + { + width: 150px; + display: block; + float: left; + margin-bottom: 10px; + } + label + { + text-align: right; + width: 75px; + padding-right: 20px; + } + br + { + clear: left; + } + ]]> + </style> + </head> + <body onload='update()'> + <svg:svg id='display' width='400' height='300'> + <svg:circle id='cursor' cx='200' +cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> + </svg:svg> + + <p>ほこりの群れは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組みあわせることで、このとても自然に見える動きができます。</p> + + <p> + これは完全に Flash やその他のベンダ特有の拡張を用いずに、 W3C 標準 – XHTML / SVG / JavaScript - によって実現されています。現在のところ、これは Mozilla Firefox 1.5 以上で動作するでしょう。</p> + + <div> + (C) 2006 <a id='emailme' href='#'>Nick Johnson</a> + + <script type='text/javascript'> + <![CDATA[ + // spam ボット撃退 + var email = '@riovia.net'; + email ='nick' + email; + document.getElementById('emailme').href = 'mailto:'+email; + ]]> + </script> + This software is free for you to use in any way whatsoever, + and comes with no warranty at all.</div> + + <form action="" onsubmit="return false;"> + <p> + <label>ほこりの数:</label> + <input id='num_motes' value='5'/> + <br/> + + <label>最大速度:</label> + <input id='max_velocity' value='15'/> + <br/> + + <label>カーソルへの引力:</label> + <input id='attract_cursor' value='6'/> + <br/> + + <label>仲間との反発力:</label> + <input id='repel_peer' value='5'/> + <br/> + </p> + </form> + + <script type='text/javascript'> + <![CDATA[ + + // ほこりの配列 + var motes; + + // 表示用の要素の取得。 + function Display() + { + return document.getElementById('display'); + } + + // 表示用の要素の大きさを定義。 + // これを配列の 2 組タプル(x,y)として返す + function Dimensions() + { + // 描画用の要素 + var display = Display(); + var width = parseInt( display.getAttributeNS(null,'width') ); + var height = parseInt( display.getAttributeNS(null,'height') ); + + return [width,height]; + } + + // これはマウスの移動イベントで呼び出される + var mouse_x = 200, mouse_y = 150; + function OnMouseMove(evt) + { + mouse_x = evt.clientX; + mouse_y = evt.clientY; + + var widget = document.getElementById('cursor'); + widget.setAttributeNS(null,'cx',mouse_x); + widget.setAttributeNS(null,'cy',mouse_y); + } + document.onmousemove = OnMouseMove; + + // カーソルの (x,y) を定義 + function Cursor() + { + return [mouse_x, mouse_y]; + } + + // ほこりの平均 (x,y) を定義 + function AverageMotePosition() + { + if( !motes ) + return [0,0]; + + if( motes.length == 0 ) + return [0,0]; + + var i; + var sum_x=0, sum_y=0; + for(i=0; i<motes.length; i++) + { + sum_x += motes[i].x; + sum_y += motes[i].y; + } + + return [sum_x/motes.length, sum_y/motes.length]; + } + + // よりよい、整数の乱数 + function Rand(modulo) + { + return Math.round( Math.random() * (modulo-1)); + } + + // Mote クラス + function Mote() + { + // 描画領域の大きさ + var dims = Dimensions(); + var width = dims[0], height = dims[1]; + + // 始めるときのランダムな座標を選ぶ。 + this.x = Rand( width ); + this.y = Rand( height ); + + // 速度の初期値はゼロ。 + this.vx = this.vy = 0; + + // 視覚的要素---初期状態ではなし + this.elt = null; + } + + // これをクラスに。 + new Mote(); + + // Mote::applyForce() -- 与えられた方向に + // 速度を調整。 + // 警告: 疑似的な物理 -- なんらかの/実際の/物理法則によって + // 制御されているわけでありません + Mote.prototype.applyForce = function(pos, mag) + { + if( pos[0] > this.x ) + this.vx += mag; + else if( pos[0] < this.x ) + this.vx -= mag; + + if( pos[1] > this.y ) + this.vy += mag; + else if( pos[1] < this.y ) + this.vy -= mag; + } + + // Mote::capVelocity() -- ほこりの速度の + // 上限を設定。 + Mote.prototype.capVelocity = function() + { + var max = parseInt( document.getElementById('max_velocity').value ); + + if( max < this.vx ) + this.vx = max; + else if( -max > this.vx ) + this.vx = -max; + + if( max < this.vy ) + this.vy = max; + else if( -max > this.vy ) + this.vy = -max; + } + + // Mote::capPosition() -- ほこりの位置の + // 上限下限を設定。 + Mote.prototype.capPosition = function() + { + var dims = Dimensions(); + if( this.x < 0 ) + this.x = 0; + else if( this.x >= dims[0] ) + this.x = dims[0]-1; + + if( this.y < 0 ) + this.y = 0; + else if( this.y >= dims[1] ) + this.y = dims[1]-1; + } + + // Mote::move() -- ほこりの移動、スクリーンの更新。 + Mote.prototype.move = function() + { + // カーソルの引力を適応。 + var attract = parseInt( document.getElementById('attract_cursor').value ); + var cursor = Cursor(); + this.applyForce(cursor, attract); + + // ほこりの位置の平均からの反発を適用 + var repel = parseInt( document.getElementById('repel_peer').value ); + var average = AverageMotePosition(); + this.applyForce(average, -repel); + + // 速度にでたらめさを追加。 + this.vx += Rand(3)-1; + this.vy += Rand(3)-1; + + // 速度の上限を適応 + this.capVelocity(); + + // 速度を適応。 + var old_x = this.x, old_y = this.y; + this.x += this.vx; + this.y += this.vy; + this.capPosition(); + + // 描画。 + + if( this.elt === null ) + { + var svg = 'http://www.w3.org/2000/svg'; + this.elt = document.createElementNS(svg,'line'); + this.elt.setAttributeNS(null,'stroke','green'); + this.elt.setAttributeNS(null,'stroke-width','3'); + this.elt.setAttributeNS(null,'stroke-opacity','0.5'); + Display().appendChild( this.elt ); + } + + this.elt.setAttributeNS(null,'x1',old_x); + this.elt.setAttributeNS(null,'y1',old_y); + + this.elt.setAttributeNS(null,'x2',this.x); + this.elt.setAttributeNS(null,'y2',this.y); + } + + + function update() + { + // 最初の呼び出し? + if( !motes ) + motes = []; + + // 幾つのほこりがあるべき ? + var num = parseInt( document.getElementById('num_motes').value ); + if( num < 0 ) + num = 0; + + // 量を厳密に確認。 + // 少なすぎ ? + while( motes.length < num ) + motes.push( new Mote() ); + // あるいは多すぎ ? + if( num == 0 ) + motes = []; + else if( motes.length > num ) + motes = motes.slice(0,num-1); + + // ほこりをランダムに移動 + if( motes.length > 0 ) + motes[ Rand( motes.length ) ].move(); + + // これを 100 分の 1 秒ごとに再実行。 + setTimeout('update()', 10); + } + ]]> + </script> + </body> +</html> +</pre> diff --git a/files/ja/web/svg/namespaces_crash_course/index.html b/files/ja/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..e2d0f49690 --- /dev/null +++ b/files/ja/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,151 @@ +--- +title: 名前空間の速修講座 +slug: Web/SVG/Namespaces_Crash_Course +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<h3 id=".E5.B0.8E.E5.85.A5" name=".E5.B0.8E.E5.85.A5">導入</h3> +<p><a href="ja/XML">XML</a> の派生言語として、 <a href="ja/SVG">SVG</a> は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない <a href="ja/Gecko">Gecko</a> ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。</p> +<h3 id=".E8.83.8C.E6.99.AF" name=".E8.83.8C.E6.99.AF">背景</h3> +<p>異なった種類の XML ベースのコンテンツが同じ XML ファイルの中で一緒に混ざるのを可能にするのことは W3C の長年の目標です。 例えば、SVG と MathML は直接 XHTML ベースの科学ドキュメントに組み込まれるかもしれません。このようなコンテンツ タイプを混ぜることが可能にすることは、多くの利点がありますが、解決するために非常に大問題を要しました。</p> +<p>当然、それぞれのXML 派生言語は仕様で述べたマークアップタグ名の意味を定義します。 1つの XML ドキュメントに異なった XML 派生言語のコンテンツを混ぜることによる問題は 別の派生言語が 1つの派生言語によって定義されたタグと同じ名前のタグを定義するかもしれないということです。 例えば、XHTMLとSVGの両方には、<code><title></code> タグがあります。 事実、ユーザエージェントはどうやって XML コンテンツが(あらかじめ)知っているものであるとき時に、単なる未知の任意のタグ名を含む無意味な XML ファイルでないと言えますか?</p> +<p>一般的な意見とは逆に、この質問の答えは「<code>DOCTYPE</code> 宣言から伝えることができる」ではありません。 DTD は混ぜられたコンテンツを念頭におかれて設計されませんでした、そして現在、複雑な混ぜられた DTD を作成する過去の試みが失敗したと考えられます。 XML、およびいくつかの XML 派生言語(SVG を含む)は DOCTYPE 宣言を必要とせず、そして SVG 1.2 は一つも持たないでしょう。<code>DOCTYPE</code> 宣言 が (普通) 一種類のコンテンツ タイプのファイルに一致するという事実は単なる偶然の一致です。DTDは内容の識別ではなく、ヴァリデーションためだけのものです。 <code>DOCTYPE</code> 宣言を使用することで XML コンテンツをだまし、特定するユーザエージェントは害を引き起こします。</p> +<p>その質問の本当の答えは XML コンテンツがユーザエージェントにどの派生言語にそのタグが属しているかを 明確な「名前空間宣言」をタグに与えるで伝えるというものです。</p> +<h3 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">名前空間を宣言する</h3> +<p>それでは、名前空間宣言はどのように見える、何所におくのでしょうか? 短い例があります。</p> +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- ここに更なるタグ --> +</svg> +</pre> +<p>名前空間宣言は <code>xmlns</code> 属性によって提供されます。この属性は <code><svg></code> タグとその子供タグは名前空間名<span class="nowiki">'http://www.w3.org/2000/svg'</span>を持っている いずれかの XML 派生言語に属すると言っています。もちろん、それは SVG です。名前空間宣言はルート要素で一度のみ提供されることが必要なことに注意してください。その宣言は <i>標準</i>の名前空間を定義するので、ユーザエージェントは <code><svg></code> タグの全ての子孫タグが同じ名前空間に属することが分かります。ユーザエージェントはそのマークアップアップの処理方を知っているか確かめるために名前空間名をチェックします。</p> +<p>名前空間名はただの文字列であることに注意してください。つまり SVG 名前空間名も URI のように見えますが重要ではありません。 URI は一意なので、一般的に使用されて、どこかに「リンク」する意志はありません。 (実際 URI が非常に頻繁に使用されるので、「名前空間 URI」という用語は「名前空間名」の代わりに一般的に使われます。)</p> +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.86.8D.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.86.8D.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">デフォルト名前空間を再宣言する</h4> +<p>もしルートタグの全ての子孫がデフォルト名前空間にあると定義されているなら、他の名前空間のコンテンツを混ぜるにはどうしたら良いのでしょう ? 簡単です。デフォルト名前空間を再定義するだけです。短い例があります</p> +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- ここに幾つか XHTML タグ --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- ここに幾つか SVG タグ --> + </svg> + <!--ここに幾つか XHTML タグ --> + </body> +</html> +</pre> +<p>この例でルート <code><html></code> タグの <code>xmlns</code> 属性はデフォルト名前空間が XHTML であるように宣言しています。結果として、ユーザエージェントによってそれとその全ての子供のタグは XHTML に属するものとして解釈されます、<code><svg></code> タグを除いて。<code><svg></code> タグは自身の <code>xmlns</code> 属性を持ち、デフォルト名前空間を再定義することで、ユーザエージェントに <code><svg></code> とその子孫(それらが再びデフォルト名前空間を再宣言しない限り)が SVG に属していることを伝えます。</p> +<p>見て、名前空間って全然難しくないでしょう。</p> +<h4 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E6.8E.A5.E9.A0.AD.E8.BE.9E.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E6.8E.A5.E9.A0.AD.E8.BE.9E.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">名前空間接頭辞を宣言する</h4> +<p>XML 派生言語は自身のタグだけではなく、自身の属性も定義します。 標準では、名前空間を全く持たず、ユニークな名前を持っている要素に現れるので、属性がユニークであるとだけ知られています。 しかし、時々多くの異なった要素の上でそれらを再利用することができるように属性を定義して、それらが使用されている要素に関わらず同じ属性であるとなおも考えられることが必要です。 これのとても良い例は XLink 仕様で定義された <code>href</code> 属性です。 この属性は外部のリソースにリンクする方法として他の XML 派生言語によって一般的に使用されます。 しかし、あなたはどうやってその属性がどの派生言語、この場合 XLink 、 に属するとユーザエージェントに伝えますか? 以下の例を考えてください。</p> +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="cool-script.js" type="text/ecmascript"/> +</svg> +</pre> +<p>この例はかなり珍しい属性 <code>xmlns:xlink</code> を含んでいます。 最初の 'xmlns' 部分から推測できるように、これは別の名前空間宣言です。しかしながら、デフォルト名前空間を設定する代わりに、この名前空間宣言は「名前空間接頭辞」と呼ばれるものに名前空間を設定します。 この場合、私たちは接頭辞 <code>xlink</code> (2つめの部分)を使用することを選びました。その接頭辞が XLink に属する属性についてユーザエージェントに伝えるのに使用されるためです。</p> +<p>名前が示すように、名前空間接頭辞は属性名とタグ名の前に置くのに使用されます。 これは上の例で <script> タグに示されるように属性名より前に名前空間接頭語とコロンを加えることで行われます。 これは特定の属性が名前空間接頭辞(XLink)に割り当てられた名前空間に属すことをユーザエージェントに伝え、他のタグにおいても同じ意味で使用することができる属性です。</p> +<p>名前空間名に関連付けられていな接頭辞の利用による XML エラーに注意してください。上の例で <code>xmlns:xlink</code> 属性によって作られた関連付けは <code>xlink:href</code> 属性がエラーに引き起こさないために必要不可欠です。この XLink 属性は SVG の <code><a></code> と <code><use></code>, <code><image></code> タグや他のタグでも頻繁に使われるので、常にドキュメントに XLink の宣言を含めることは良い考えです。</p> +<p>余談として、タグ名に名前空間接頭語を使用することができるのを知っていると役に立ちます。これは特定のタグ(しかし今回の子供ではありません!)が接頭辞に割り当てられた名前空間に属することをユーザエージェントに伝えます。 これを知っていることは、あなたが以下の例のようなマークアップに出くわしたときの混乱を節約するでしょう:</p> +<pre><html + xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>XHTML にインラインで埋め込まれた SVG </h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> +<p><code><svg:svg></code> タグとその子供の <code><svg:circle></code> に名前空間接頭辞が使われているので、デフォルト名前空間を再宣言する必要が無いことに注意してください。一般にこの方法で沢山のタグに接頭辞をつけるよりもデフォルト名前空間を再宣言した方が良いです。</p> +<h3 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E4.BB.98.E3.81.91.E3.82.89.E3.82.8C.E3.81.9F_XML_.E3.81.A7.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E4.BB.98.E3.81.91.E3.82.89.E3.82.8C.E3.81.9F_XML_.E3.81.A7.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0">名前空間付けられた XML でのスクリプティング</h3> +<p>名前空間はマークアップだけでなく、スクリプティングにも影響します。もし SVG のような 名前空間付けられた XML 用のスクリプトを書くなら次をお読みください。</p> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> 勧告はオリジナルの <a class="external" href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a> 勧告がリリースされる前に作られたので、DOM1 は名前空間を認識しません。これは SVG のような 名前空間付けられた XML で問題を引き起こします。それらの問題を解決するために <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> は全て DOM Level1 メソッドの適切な名前空間を認識している同等のメソッドを加えました。SVG でスクリプティングをするとき、<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">名前空間を認識しているメソッドを使うことが大切です</a>。下の表は SVG と一緒に使うべきではない DOM 1 メソッドと代わりに使うべき同等な DOM2 の対応するメソッドをリストしています。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1 (使わないで下さい)</th> + <th>DOM2 (代わりにこれらを使ってください!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">要素にも追加されました</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td>[<a class="external" href="http://w" rel="freelink">http://w</a> ww.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS setNamedItemNS]</td> + </tr> + </tbody> +</table> +<p>全ての DOM2 の名前空間を認識しているメソッドの最初の引数は問題になっている要素か属性の名前空間名(名前空間 URI としても知らています) で無ければなりません。SVG <strong>要素</strong> のためには、これは <span class="nowiki">'http://www.w3.org/2000/svg'</span> です。しかし、よく注意してください:<a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> 仕様は接頭辞無しの属性の名前空間名は値をもっていません。言い替えると、そのタグの名前空間であっても、そのタグの名前空間を使わないということです。 代わりに<strong>無条件の(接頭辞無し)属性の名前空間名として <code>null</code> を使わなくてはなりません</strong>。つまり <code>document.createElementNS()</code> を使い SVG <code>rect</code> <em>要素</em>を作るには、こう書かなくてはなりません:</p> +<pre>document.createElementNS('http://www.w3.org/2000/svg', 'rect'); +</pre> +<p>しかし、SVG の <code>rect</code> 要素の <code>x</code> <em>属性</em>の値を取り出すにはこう書かなくてはなりません:</p> +<pre class="eval">rect.getAttributeNS(<b>null</b>, 'x'); +</pre> +<p>これは名前空間接頭辞)<em>付き</em>の属性(タグと同じ XML 派生言語に属していない属性)はこの限りではないことに注意してください。xlink:href 属性の様な属性はその接頭辞に割り当てられた名前空間名(XLink は <span class="nowiki">http://www.w3.org/1999/xlink</span>)が必要です。従って SVG の <code><a></code> 要素の <code>xlink:href</code> 属性の値を手に入れるにはこう書くでしょう:</p> +<pre>elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); +</pre> +<p>名前空間を持った属性を設定するときに、後で DOM がより簡単に XML に変換できるように(例えばもしそれをサーバに送り返したいなら)、それらの接頭辞を2番目の引数にも含めることが推奨されます(が強制ではありません)。例:</p> +<pre>elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); +</pre> +<p>最後の例として、どうやってスクリプトを使って <image> 要素を動的に作るべきか実演を示します。</p> +<pre>var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</pre> +<h3 id=".E3.81.BE.E3.81.A8.E3.82.81" name=".E3.81.BE.E3.81.A8.E3.82.81">まとめ</h3> +<p>常にあなたの XML ファイルの中で使う名前空間が宣言されているか確認してください。もしそうしていないと、Firefox のようなユーザエージェントはコンテンツを理解せずに単に XML マークアップを表示するか、ユーザに XML の中にエラーが有ることを伝えます。全新しい SVG ファイルを作る時、全ての一般的に使う名前空間宣言を含んだテンプレートを使うことは良い考えです。もしまだ持っていなければ、次のコードで作り始めてください</p> +<pre><svg version="1.1" + baseProfile="full" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:ev="http://www.w3.org/2001/xml-events"> +</svg> +</pre> +<p>あなたが特定のドキュメントでそれら全ての名前空間を使用しなくても、名前空間宣言を含んで全く害はありません。 後日、未使用の名前空間の1つをコンテンツに結局加えるなら、それはいくつかの煩わしいエラーから救ってくれるかもしれません。</p> +<h3 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B">完全な例</h3> +<p>完全な例は <a href="ja/SVG/Namespaces_Crash_Course/Example">SVG:Namespaces Crash Course:Example</a> を参照してください。</p> diff --git a/files/ja/web/svg/other_resources/index.html b/files/ja/web/svg/other_resources/index.html new file mode 100644 index 0000000000..23d76ef02f --- /dev/null +++ b/files/ja/web/svg/other_resources/index.html @@ -0,0 +1,20 @@ +--- +title: その他のリソース +slug: Web/SVG/Other_Resources +tags: + - Reference + - SVG +translation_of: Web/SVG/Other_Resources +--- +<p><span class="seoSummary">こちらは SVG の追加リソースの一覧です。</span></p> + +<ul> + <li><a class="external" href="http://www.croczilla.com/svg/">Mozilla SVG Resources</a></li> + <li><a class="external" href="http://svg.org/">SVG.org</a></li> + <li><a class="external" href="http://www.svgbasics.com/">SVGBasics Tutorials</a></li> + <li><a class="external" href="http://www.w3.org/Graphics/SVG/">W3C SVG Homepage</a></li> + <li><a class="external" href="http://svg-whiz.com/wiki/">SVG Wiki</a></li> + <li><a class="external" href="http://wiki.svg.org/index.php?title=Server_Configuration" rel="freelink">http://wiki.svg.org/index.php?title=..._Configuration</a></li> +</ul> + +<p><span class="comment">I moved this from the Other Resources category, not sure why it's in other resources -Nickolay <a class="external" href="http://developer.mozilla.org/en/docs/SVG_Server_Configuration_%28external%29" rel="freelink">http://developer.mozilla.org/en/docs...%28external%29</a></span></p> diff --git a/files/ja/web/svg/scripting/index.html b/files/ja/web/svg/scripting/index.html new file mode 100644 index 0000000000..91830c66d4 --- /dev/null +++ b/files/ja/web/svg/scripting/index.html @@ -0,0 +1,58 @@ +--- +title: スクリプティング +slug: Web/SVG/Scripting +tags: + - SVG +translation_of: Web/SVG/Scripting +--- +<p> +</p> +<h3 id=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.B3.E3.83.BC.E3.83.89.E3.81.AE.E5.88.9D.E6.9C.9F.E6.8C.99.E5.8B.95.E3.82.92.E9.98.B2.E3.81.90" name=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.B3.E3.83.BC.E3.83.89.E3.81.AE.E5.88.9D.E6.9C.9F.E6.8C.99.E5.8B.95.E3.82.92.E9.98.B2.E3.81.90"> イベントコードの初期挙動を防ぐ </h3> +<p>ドラッグ・アンド・ドロップのコードを書いていると、時々、ページのテキストをドラッグ中に誤って付随的に選択されてしまうことがあります。 +もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻る、ブラウザの既定の振る舞いを上書きしたいと望むでしょう。ブラウザが前のページに戻るのを防ぎたいと望むでしょう。 +このような場合、<code>evt.preventDefault()</code> メソッドを使うことが出来ます。 +</p> +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AB_eventListeners_.E3.82.92.E4.BD.BF.E3.81.86" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AB_eventListeners_.E3.82.92.E4.BD.BF.E3.81.86"> オブジェクトに <code>eventListeners</code> を使う </h3> +<p>対話的な SVG を書くとき、<code>addEventListener()</code> と <code>removeEventListener()</code> メソッドはとても便利です。これらのメソッドの二番目のパラメータとして、<code>handleEvent</code> インタフェースを実装するオブジェクトを渡すことができます。 +</p> +<pre>function myRect(x,y,w,h,message){ + this.message=message + + this.rect=document.createElementNS("http://www.w3.org/2000/svg","rect") + this.rect.setAttributeNS(null,"x",x) + this.rect.setAttributeNS(null,"y",y) + this.rect.setAttributeNS(null,"width",w) + this.rect.setAttributeNS(null,"height",h) + document.documentElement.appendChild(this.rect) + + this.rect.addEventListener("click",this,false) + + this.handleEvent= function(evt){ + switch (evt.type){ + case "click": + alert(this.message) + break; + } + } + } +</pre> +<h3 id=".E6.96.87.E6.9B.B8.E9.96.93.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0_-_.E5.9F.8B.E3.82.81.E8.BE.BC.E3.81.BF_SVG_.E3.81.AE.E5.8F.82.E7.85.A7" name=".E6.96.87.E6.9B.B8.E9.96.93.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0_-_.E5.9F.8B.E3.82.81.E8.BE.BC.E3.81.BF_SVG_.E3.81.AE.E5.8F.82.E7.85.A7"> 文書間のスクリプティング - 埋め込み SVG の参照 </h3> +<p>HTML 内で SVG を使う場合、Adobe SVG Viewer 3.0 は自動的に SVG 文書を示す <code>svgDocument<code> と呼ばれるウィンドウプロパティをインクルードします。これは Mozilla のネイティヴ実装には当てはまりません。従って Mozilla では <code>window.svgDocument</code> は動きません。代わりに埋め込まれた SVG ドキュメントを参照するために <code>var svgDoc=document.embeds{{ mediawiki.external('\"name_of_svg\"') }}.getSVGDocument();</code> を代替使用することができます。 +</p><p>また、<code>document.getElementById("<i>svg_elem_name</i>").getSVGDocument()</code> を使用して同じ結果を得ることもできます。 +</p> +<h3 id=".E6.96.87.E6.9B.B8.E9.96.93.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0_-_JavaScript_.E9.96.A2.E6.95.B0.E3.81.AE.E5.91.BC.E3.81.B3.E3.81.A0.E3.81.97" name=".E6.96.87.E6.9B.B8.E9.96.93.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0_-_JavaScript_.E9.96.A2.E6.95.B0.E3.81.AE.E5.91.BC.E3.81.B3.E3.81.A0.E3.81.97"> 文書間のスクリプティング - JavaScript 関数の呼びだし </h3> +<p>HTML ドキュメントに埋め込まれた SVG ファイルから HTML ファイルの中にある JavaScript 関数を呼び出すとき、その関数を参照するには <code>parent.functionname()</code> を使うべきです。Adobe SVG Viewer プラグインは <code>functionname()</code> の利用を許可していますが、このようなことを行うには適していません。 +</p> +<div class="note"> +<p><b>注意:</b> <a class="external" href="http://wiki.svg.org/Inter-Document_Communication">SVG wiki</a> によると Adobe の SVG バージョン 6 プレビュープラグインでは <code>"parent"</code> JavaScript 変数は壊れているとのことです。提案された次善策は <code>parent</code> の代わりに <code>top</code> を使うことです。 +</p> +</div> +<p>更なる情報といくつかの例を <a class="external" href="http://wiki.svg.org/Inter-Document_Communication">SVG wiki inter-document scripting page</a> で見付けることが出来ます。 +</p> +<h3 id="setProperty_.E3.81.AF3.E3.81.A4.E3.81.AE.E3.83.91.E3.83.A9.E3.83.A1.E3.82.BF.E3.82.92.E6.8C.81.E3.81.A1.E3.81.BE.E3.81.99" name="setProperty_.E3.81.AF3.E3.81.A4.E3.81.AE.E3.83.91.E3.83.A9.E3.83.A1.E3.82.BF.E3.82.92.E6.8C.81.E3.81.A1.E3.81.BE.E3.81.99"> <code>setProperty</code> は3つのパラメタを持ちます </h3> +<p>Mozilla では <code>svgElement.style.setProperty("fill-opacity", "0.0")</code> 関数は <code>SYNTAX ERR</code> という DOMException を投げます。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。<code>setProperty</code> 関数は 3 つのパラメタを持つ関数として定義されています。上記は <code>'svgElement.style.setProperty("fill-opacity", "0.0", "")'</code> で置き換えられます。こちらの方がより標準に一致しています。 +</p> +<h3 id=".E3.83.AA.E3.83.B3.E3.82.AF" name=".E3.83.AA.E3.83.B3.E3.82.AF"> リンク </h3> +<p><a href="ja/SVG">SVG ホームページ</a> +</p><p><a class="external" href="http://wiki.svg.org/Main_Page#Scripting_and_Programming">SVG wiki on Scripting and Programming</a> +</p>{{ languages( { "en": "en/SVG/Scripting" } ) }} diff --git a/files/ja/web/svg/svg_animation_with_smil/index.html b/files/ja/web/svg/svg_animation_with_smil/index.html new file mode 100644 index 0000000000..e1680b6073 --- /dev/null +++ b/files/ja/web/svg/svg_animation_with_smil/index.html @@ -0,0 +1,140 @@ +--- +title: SVG animation with SMIL +slug: Web/SVG/SVG_animation_with_SMIL +translation_of: Web/SVG/SVG_animation_with_SMIL +--- +<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG" title="ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p> + +<ul> + <li>要素の数値属性 (x, y など) のアニメーション</li> + <li>トランスフォーム属性 (translation または rotation) のアニメーション</li> + <li>色属性のアニメーション</li> + <li>モーションパスに従う</li> +</ul> + +<p>これらは {{ SVGElement("animate") }} のような SVG 要素を、アニメーションさせる SVG 要素の中に追加することで実現します。以下は、4 つのアニメーション方法を例として示します。</p> + +<h2 id="要素の属性のアニメーション">要素の属性のアニメーション</h2> + +<p>以下の例は、円 (circle) の <strong>cx</strong> 属性のアニメーションを行います。そのために、{{ SVGElement("circle") }} 要素の内部に {{ SVGElement("animate") }} 要素を追加します。{{ SVGElement("animate") }} の重要な属性は以下のとおりです:</p> + +<dl> + <dt><strong>attributeName</strong></dt> + <dd>アニメーションを行う属性名</dd> + <dt>from</dt> + <dd>属性の初期状態の値</dd> + <dt>to</dt> + <dd>属性の最後の値</dd> + <dt>dur</dt> + <dd>アニメーションを行う時間 (例えば、5秒の場合は '5s' と書く)</dd> +</dl> + +<p>同じ要素でより多くの属性のアニメーションを行いたい場合は、{{ SVGElement("animate") }} 要素を追加してください。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Attribute Animation with SMIL</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" /> + </circle> + </svg> + </body> +</html> +</pre> + +<h2 id="トランスフォーム属性のアニメーション">トランスフォーム属性のアニメーション</h2> + +<p>{{ SVGElement("animateTransform") }} 要素は、<strong>トランスフォーム</strong> 属性のアニメーションを可能にします。数値をとる <strong>x</strong> のような、単純な属性のアニメーションを行うのではないため、この新しい要素が必要です。Rotation 属性はこのようなものです: <code>rotation(theta, x, y)</code>。ここで <code>theta</code> は角度、<code>x</code> および <code>y</code> は絶対位置を示します。以下の例では、回転の中心位置と角度のアニメーションを行います。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with transform</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"> + + <animateTransform + attributeName="transform" + begin="0s" + dur="20s" + type="rotate" + <!-- 0 度から 360 度までの回転と、x 方向に 60 から 100 への移動を行う --> + from="0 60 60" + to="360 100 60" + <!-- 図形が存在しなくなるまでアニメーションを続ける --> + repeatCount="indefinite" + /> + </rect> + </svg> + </body> +</html> +</pre> + +<h2 id="パスに従うアニメーション">パスに従うアニメーション</h2> + +<p>The {{ SVGElement("animateMotion") }} 要素は、パスに従った SVG 要素の位置や回転のアニメーションを可能にします。パスは {{ SVGElement("path") }} と同じ方法で定義されます。オブジェクトがパスの接線に沿って回転するかを定義する属性を設定することができます。</p> + +<h3 id="例_1_直線的な移動">例 1: 直線的な移動</h3> + +<p>この例では、青い円 (circle) が黒い四角形の左端と右端をバウンドするように、無限に行き来します。このアニメーションは {{ SVGElement("animateMotion") }} 要素で制御されます。ここでは、アニメーションの始点を定義する <strong>M</strong>oveTo コマンド、円を 300 ピクセル右へ移動する <strong>H</strong>orizontal-line コマンド、そしてパスを閉じて始点へ戻ることを定義する <strong>Z</strong> コマンドで構成されるパスを指定しています。<strong>repeatCount</strong> 属性の値を <code>indefinite</code> にすることで、SVG 画像が存在する間は永久にアニメーションを繰り返すよう指定します。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with Path</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation"> + + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" /> + </circle> + </svg> + </rect> + </svg> + </body> +</html> +</pre> + +<p><a href="https://developer.mozilla.org/samples/svg/svganimdemo1.html">View live sample</a></p> + +<h3 id="例_2_曲線状の移動">例 2: 曲線状の移動</h3> + +<p>前と同様の例を、曲線状のパスを用い、またパスの方向に従い回転するようにしたものです。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>SVG SMIL Animate with Path</title> + </head> + <body> + <svg width="300px" height="100px"> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="0" width="20" height="50" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 50,100 Q40,75 90,70Q95,60 95,50Q180,40 170,100Z" + dur="3s" repeatCount="indefinite" rotate="auto"> + </rect> + </svg> + </body> +</html> +</pre> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/SVG" title="en/SVG">SVG</a></li> + <li><a class="external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li> +</ul> diff --git a/files/ja/web/svg/svg_as_an_image/index.html b/files/ja/web/svg/svg_as_an_image/index.html new file mode 100644 index 0000000000..249a90030a --- /dev/null +++ b/files/ja/web/svg/svg_as_an_image/index.html @@ -0,0 +1,70 @@ +--- +title: 画像としての SVG +slug: Web/SVG/SVG_as_an_Image +tags: + - Images + - NeedsContent + - SVG +translation_of: Web/SVG/SVG_as_an_Image +--- +<p><span class="seoSummary">SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。</span></p> + +<ul> + <li>HTML の {{HTMLElement("img")}} または {{SVGElement("svg")}} 要素</li> + <li>CSS の {{cssxref("background-image")}}</li> +</ul> + +<h2 id="Gecko-specific_contexts" name="Gecko-specific_contexts">Gecko 固有の場所</h2> + +<p>さらに、 Gecko 2.0 {{geckoRelease("2.0")}}では次の場所でも SVG の使用に対応しています。</p> + +<ul> + <li>CSS の {{cssxref("list-style-image")}}</li> + <li>CSS の {{cssxref("content")}}</li> + <li>SVG の {{SVGElement("image")}} 要素</li> + <li>SVG の {{SVGElement("feImage")}} 要素</li> + <li>Canvas の <a href="/ja/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a> 関数</li> +</ul> + +<h3 id="Restrictions" name="Restrictions">制限</h3> + +<p>セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。</p> + +<ul> + <li><a href="/ja/docs/JavaScript">JavaScript</a> は無効になります。</li> + <li>外部のリソース (画像やスタイルシートなど) を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。</li> + <li>{{cssxref(":visited")}}-のリンクスタイルは描画されません。</li> + <li>プラットフォームネイティブのウィジェットのスタイル付け (OS のテーマに基づくもの) は無効です。</li> +</ul> + +<p>なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} の何れかの要素を使用して文書として埋め込まれた場合には適用されません。</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("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{HTMLElement("img")}} 要素内の SVG の使い方を定義。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td> + <td>{{Spec2("CSS3 Backgrounds")}}</td> + <td>{{cssxref("background-image")}} プロパティ内の SVG の使い方を定義。</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/SVG_In_HTML_Introduction">HTML 内の SVG 入門</a></li> +</ul> diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..2b87124f8a --- /dev/null +++ b/files/ja/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,76 @@ +--- +title: Basic Shapes +slug: Web/SVG/Tutorial/Basic_Shapes +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +<p>{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}</p> +<p>ほとんどの SVG 描画では、数種類の基本的な図形が使われます。それら図形の用途は、その名前からかなり明確です。図形の位置やサイズを指定する属性をいくつか示しますが、要素リファレンスにはここで網羅しない他のプロパティも含めて正確で完全な説明があるでしょう。しかし、それらはほとんどの SVG ドキュメントで用いられますので、何らかの形で紹介することが必要でしょう。</p> +<h2 id="Basic_shapes" name="Basic_shapes">基本的な図形</h2> +<p>図形を挿入するには、ドキュメント内に要素を作成します。さまざまな要素が各々さまざまな図形に対応づけられ、また各属性が図形のサイズや位置を定義します。一部の要素は他の図形で作成できるという点でやや冗長ですが、それらすべては利便性およびドキュメントをできるだけ小さくかつ読みやすくするために存在します。すべての基本的な図形を右図に示しています。これらを生成するコードは以下のとおりです:</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/359/=Shapes.png"></p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> + + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> + + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg> +</pre> +<div class="note"><strong>注意:</strong> <code>stroke</code>、<code>stroke-width</code> および <code>fill</code> の各属性は後のチュートリアルで説明します。</div> +<h3 id="Rectangles" name="Rectangles">長方形</h3> +<p><a href="/ja/SVG/Element/rect" title="ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p> +<pre class="eval"> <rect x="10" y="10" width="30" height="30"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> +</pre> +<dl> <dt>x</dt> <dd>長方形の左上の角の位置を示す、X 座標です。</dd> <dt>y</dt> <dd>長方形の左上の角の位置を示す、Y 座標です。</dd> <dt>width</dt> <dd>長方形の幅です。</dd> <dt>height</dt> <dd>長方形の高さです。</dd> <dt>rx</dt> <dd>長方形の角の、X 軸方向の半径です。</dd> <dt>ry</dt> <dd>長方形の角の、Y 軸方向の半径です。</dd> +</dl> +<h3 id="Circle" name="Circle">円</h3> +<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle" title="ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p> +<pre class="eval"> <circle cx="25" cy="75" r="20"/> +</pre> +<dl> <dt>r</dt> <dd>円の半径です。</dd> <dt>cx</dt> <dd>円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>円の中心の位置を示す、Y 座標です。</dd> +</dl> +<h3 id="Ellipse" name="Ellipse">楕円</h3> +<p><a href="/ja/SVG/Element/ellipse" title="ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p> +<pre class="eval"> <ellipse cx="75" cy="75" rx="20" ry="5"/> +</pre> +<dl> <dt>rx</dt> <dd>楕円の X 軸方向の半径です。</dd> <dt>ry</dt> <dd>楕円の Y 軸方向の半径です。</dd> <dt>cx</dt> <dd>楕円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>楕円の中心の座標を示す、Y 座標です。</dd> +</dl> +<h3 id="Line" name="Line">直線</h3> +<p><a href="/ja/SVG/Element/line" title="ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p> +<pre class="eval"> <line x1="10" x2="50" y1="110" y2="150"/> +</pre> +<dl> <dt>x1</dt> <dd>点 1 の X 座標です。</dd> <dt>y1</dt> <dd>点 1 の Y 座標です。</dd> <dt>x2</dt> <dd>点 2 の X 座標です。</dd> <dt>y2</dt> <dd>点 2 の Y 座標です。</dd> +</dl> +<h3 id="Polyline" name="Polyline">ポリライン</h3> +<p><a href="/ja/SVG/Element/polyline" title="ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p> +<pre class="eval"> <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> +</pre> +<dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。</dd> +</dl> +<h3 id="Polygon" name="Polygon">多角形</h3> +<p><a href="/ja/SVG/Element/polygon" title="ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code><rect/></code> 要素を作成するために polygon を用いることができることに留意してください。</p> +<pre class="eval"> <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> +</pre> +<dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。</dd> +</dl> +<h3 id="Path" name="Path">パス</h3> +<p><a href="/ja/SVG/Element/path" title="ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p> +<pre class="eval"> <path d="M 20 230 Q 40 205, 50 230 T 90230"/> +</pre> +<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd> +</dl> +<p>{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}</p> +<p><span class="comment">Interwiki Languages Links</span></p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Basic_Shapes", "fr": "fr/SVG/Tutoriel/Formes_de_Bases"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/basic_transformations/index.html b/files/ja/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..08e3709003 --- /dev/null +++ b/files/ja/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,96 @@ +--- +title: Basic Transformations +slug: Web/SVG/Tutorial/Basic_Transformations +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> + + +<p>これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、{{SVGElement("g")}} 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します:</p> +<pre class="brush: xml"><g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> +</g> +</pre> +<p>この結果 2 つの赤い長方形ができます。</p> +<p>以下に示すトランスフォームは、要素の <code>transform</code> 属性の要約です。トランスフォームはホワイトスペース文字区切りで連結することで、連鎖させることができます。</p> + + + + + + +<h2 id="Translation" name="Translation">移動</h2> +<p>適切な属性を用いて要素を配置できる場合でも、要素をあちこちに移動させる必要があるかもしれません。この用途のために、<code>translate()</code> トランスフォームを用意しています。</p> +<pre class="brush: xml"><rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</pre> +<p>この例では長方形を描画し、描画位置を (0, 0) ではなく (30, 40) に移します。</p> +<p>2 番目の値が与えられない場合は、<var>0</var> であるとみなします。</p> + + + + + + +<h2 id="Rotation" name="Rotation">回転</h2> +<p>要素を回転させることは、よく行われる処理です。これには <code>rotate()</code> トランスフォームを用います:</p> +<pre class="brush: xml"><rect x="20" y="20" width="20" height="20" transform="rotate(45)" /> +</pre> +<p>この例では、45 度回転した正方形を表示します。<code>rotate()</code> の値は "度" 単位で与えます。</p> + + + + + + +<h2 id="Skewing" name="Skewing">傾斜</h2> +<p>長方形からひし形を作成するために、<code>skewX()</code> および <code>skewY()</code> トランスフォームを利用できます。<code>どちらのトランスフォームも</code>、要素をどれだけ傾けるかを表す角度を与えます。</p> + + + + + + +<h2 id="Scaling" name="Scaling">拡大と縮小</h2> +<p><code>scale()</code> は、要素のサイズを変更します。これは 2 つの数値を受け取って、拡大または縮小の比率として用います。<var>0.5</var> は 50% への縮小を表します。2 番目の数値を省略した場合は、1 番目の値と同じであるとみなします。</p> + + + + + + + +<h2 id="Complex_transformations_with_matrix()" name="Complex_transformations_with_matrix()"><code>matrix()</code> を用いた複雑なトランスフォーム</h2> +<p>前出のトランスフォームはすべて、3x3 のトランスフォーム行列で表現できます。複数のトランスフォームをまとめるために、<code>matrix(A1, A2, B1, B2, C1, C2)</code> トランスフォームを用いて結果の行列を直接設定することができます。このプロパティに関する詳細情報は、<a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">SVG 勧告</a>で得ることができます。</p> + + + + + +<h2 id="Effects_on_Coordinate_Systems" name="Effects_on_Coordinate_Systems">座標系に与える効果</h2> +<p>トランスフォームを用いるときは、トランスフォームを適用した要素内で新たな座標系が確立します。つまり、その要素や子要素に指定する単位が 1:1 のピクセル対応づけに従わない可能性があり、またそれはトランスフォームに伴う変形、移動、拡大縮小にも波及します。</p> +<pre class="brush: xml"><g transform="scale(2)"> + <rect width="50" height="50" /> +</g> +</pre> +<p>上記の例で、長方形のサイズは 100x100 ピクセルになります。<code>userSpaceOnUse</code> のような属性に依存している場合などに、より興味深い効果が発生します。</p> + + + + + +<h2 id="Embedding_SVG_in_SVG" name="Embedding_SVG_in_SVG">SVG 内への SVG 埋め込み</h2> +<p>HTML とは対照的に、SVG では他の <code>svg</code> 要素をシームレスに埋め込むことができます。この方法を用い、内部の <code>svg</code> 要素で <code>viewBox</code>、<code>width</code>、<code>height</code> 属性を活用して新たな座標系を作成することもできます。</p> +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +</pre> +<p>上記の例は、基本的にはもうひとつ上の例と同じ効果をもたらすもので、すなわち長方形のサイズは rect 要素で指定したサイズの 2 倍になります。</p> + + +<div>{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}</div> diff --git a/files/ja/web/svg/tutorial/clipping_and_masking/index.html b/files/ja/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..ec5e0a778a --- /dev/null +++ b/files/ja/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,58 @@ +--- +title: クリッピングとマスキング +slug: Web/SVG/Tutorial/Clipping_and_masking +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +<div> + {{PreviousNext("SVG/Tutorial/Basic_Transformations", "SVG/Tutorial/Other_content_in_SVG")}}</div> +<p>苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。</p> +<p><strong>クリッピング</strong>はある要素のうち、他の場所で定義された一部分を取り除くことを指します。この場合は半透明効果をかけることはできず、完全に表示するか全く表示しないかの扱いになります。</p> +<p><strong>マスキング</strong>は半透明効果やマスクの濃淡値を考慮することで、ソフトエッジ効果をかけることができます。</p> +<h2 id="Creating_clips" name="Creating_clips">クリップの作成</h2> +<p><code>circle</code> 要素をもとにして、先に述べた半円を作成しましょう:</p> +<pre class="brush:xml"><clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> +</clipPath> + +<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</pre> +<p>(100,100) を中心にした半径 100 の円を描画します。<code>clip-path</code> 属性は、<code>rect</code> 要素を 1 つ含む <code>{{SVGElement("clipPath")}}</code> 要素を参照しています。この長方形は、キャンバスの上半分に黒色で描画されるものです。なお補足として、<code>clipPath</code> 要素はたいてい <code>defs</code> セクションに置かれます。</p> +<p>ところが、<code>rect</code> 要素は描画されません。描画されない代わりにそのピクセルデータは、円の中で最終的にレンダリングするピクセルを決定することに用いられます。長方形は円の上半分だけを覆っているため、円の下半分は消滅します。</p> +<p><img alt="clipdemo.png" class="default" src="/@api/deki/files/4933/=clipdemo.png"></p> +<p>これで、path 要素の円弧を扱う必要なしに半円を作りました。クリッピング用に <code>clipPath</code> の内部にあるすべてのパスが、そのストロークやトランスフォームと併せて調査および評価されます。そして適用先のオブジェクトのうち、<code>clipPath</code> の内容物で決められた透過領域にかかる部分は描画されません。色や不透明度などは、図形の一部を完全に消滅させない限り効果がありません。</p> +<h2 id="Masking" name="Masking">マスキング</h2> +<p>マスキングの効果は、グラデーションと共に適用するともっとも印象的です。要素をフェードアウトしたい場合は、マスクを用いることですぐにその効果を得ることができます。</p> +<pre class="brush:xml"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="white" stop-opacity="0" /> + <stop offset="1" stop-color="white" stop-opacity="1" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> + + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +</pre> +<p>下層のレイヤーに緑色で塗りつぶした <code>rect</code> 、上層に赤色で塗りつぶした <code>rect</code> があります。また後者には、<code>mask</code> 要素を指し示す <code>mask</code> 属性があります。mask 要素の内容物は <code>rect</code> 要素が 1 つあり、これは透明から白色へのグラデーションで塗りつぶしています。この結果、赤色の長方形のピクセルは mask の内容物のアルファ値 (透明度) を継承して、最終的に緑色から赤色へのグラデーションができます:</p> +<p><img alt="maskdemo.png" class="default" src="/@api/deki/files/4945/=maskdemo.png"></p> +<h2 id="Transparency_with_opacity" name="Transparency_with_opacity"><code>opacity</code> による透明度</h2> +<p>要素全体の透明度を設定することができます。それには <code>opacity</code> 属性を用います:</p> +<pre><rect x="0" y="0" width="100" height="100" opacity=".5" /> +</pre> +<p>上記の長方形は、半透明で描画します。fill および stroke について分けられた 2 つの属性 <code>fill-opacity</code> と <code>stroke-opacity</code> があり、それぞれのプロパティの不透明度を分けて制御します。なお、ストロークは塗りつぶしの上層に描画することに注意してください。このために塗りつぶしもある要素でストロークの不透明度を設定した場合は、ストロークの半分で塗りつぶしが透けて見え、また同時に残り半分で背景が透けて見えます:</p> +<pre class="brush:xml"><rect x="0" y="0" width="200" height="200" fill="blue" /> +<circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</pre> +<p><img alt="opacitydemo.png" class="internal default" src="/@api/deki/files/4942/=opacitydemo.png"></p> +<p>この例では、青い背景の上に赤い円があります。黄色のストロークに 50% の不透明度を設定しており、事実上 2 色のストロークになります。</p> +<h2 id="Using_well-known_CSS_techniques" name="Using_well-known_CSS_techniques">周知の CSS 技術の利用</h2> +<p>Web 開発者が持つツールの中でもっとも強力なもののひとつが、<code>display: none</code> です。それゆえ、CSS2 で定義された <code>visibility</code> や <code>clip</code> と併せて、この CSS プロパティも SVG に取り込むことが決定した点に若干の驚きがあります。過去に設定した <code>display: none</code> を元に戻すためには、すべての SVG 要素の初期値が <code>inline</code> であると知っておくことが重要です。</p> +<div> + {{PreviousNext("SVG/Tutorial/Basic_Transformations", "SVG/Tutorial/Other_content_in_SVG")}}</div> diff --git a/files/ja/web/svg/tutorial/fills_and_strokes/index.html b/files/ja/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..f5fe560017 --- /dev/null +++ b/files/ja/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,103 @@ +--- +title: Fills and Strokes +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +<p>{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}</p> +<p>全種類の図形を描く方法を知ることができましたので、次の目標はそれらに色をつけることでしょう。これを行う方法はいくつかあり、オブジェクトの属性で指定、インライン CSS の利用、埋め込んだ CSS セレクタの利用、外部 CSS ファイルの利用が含まれます。Web で見かけるほとんどの SVG はインライン CSS を用いていますが、どの方法にも利点と欠点があります。</p> +<p>{{ 英語版章題("Fill and Stroke Attributes") }}</p> +<h2 id="fill_および_stroke_属性">fill および stroke 属性</h2> +<p>{{ 英語版章題("Painting") }}</p> +<h3 id="塗りつぶし">塗りつぶし</h3> +<p>これまで見てきた例で塗りつぶしの属性を入れずにおくことが少し難しかった一方で、あなたは気づいていなかったかもしれませんが、もっとも基本的な色づけはノードに 2 つの属性を設定することで行えます: <code>fill</code> と <code>stroke</code>。fill はオブジェクト内部の色を、stroke はオブジェクトの縁の線の色を指定します。色名 (例えば <em>red</em>)、RGB 値 (例えば <em>rgb(255,0,0)</em>)、16進数値、RGBA 値など、HTML で用いる CSS の色名と同じ仕組みを用いることができます。</p> +<pre class="eval"> <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" + fill-opacity="0.5" stroke-opacity="0.8"/> +</pre> +<p>加えて、SVG では fill と stroke それぞれの不透明度を分けて指定することができます。これは <code>fill-opacity</code> 属性と <code>stroke-opacity</code> 属性で操作します。FF3 では RGBA 値を受け入れて同様の透過効果をもたらしますが、他のブラウザとの互換性のために fill および stroke の不透明度は分けて指定することが最善であることに注意してください。RGBA 値と fill/stroke-opacity 値をどちらも指定した場合は、両方とも適用されます。</p> +<p>{{ 英語版章題("Stroke") }}</p> +<h3 id="ストローク">ストローク</h3> +<p>この色のプロパティに加えて、線上にストロークを描画する方法を操作するための属性がいくつかあります。</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png"></p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> + <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> + <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> +</svg> +</pre> +<p>これらについて説明する前に、ストロークはパスの周りに中央揃えで置かれるよう描画されますので、上の例ではパスを桃色、ストロークを黒色で示していることを注記したいと思います。<code>stroke-width</code> プロパティはストロークの幅を指定します。例でわかるように、ストロークはパスの両側へ均等に置かれます。</p> +<p>第 2 のプロパティは前出の例にもある <code>stroke-linecap</code> プロパティです。これは線の終端に見られる形状を指定します。このプロパティには指定できる値が 3 種類あります。<code>butt</code> はストロークの向きに対して垂直 (90 度) のまっすぐな縁で線を閉じ、縁はパスの終端を横切ります。<code>square</code> は本質的には butt と同じ外見ですが、ストロークが実際のパスから少しはみ出すように広がることが違いです。パスからはみ出すストロークの長さは <code>stroke-width</code> プロパティで制御できます。<code>round</code> はストロークの終端が湾曲する効果を生み出し、その曲線の半径もまた <code>stroke-width</code> プロパティで制御されます。</p> +<p>また <code>stroke-linejoin</code> プロパティは、2 つの線分が接続するときにストロークをどのように描画するかを制御します。</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png"></p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/> + + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="transparent" stroke-linejoin="round"/> + + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/> +</svg> +</pre> +<p>各々のポリラインは 2 つの線分で構成されています。これら 2 つが合わさる場所の接続法は、<code>stroke-linejoin</code> 属性で制御されます。この属性には指定できる値が 3 種類あります。<code>miter</code> は、一つの角だけが使用される四角形を作成するように、ストロークの線を元の幅のままで少し延長します。<code>round</code> は miter の動作に加えて、湾曲した線分を描画します。<code>bevel</code> は、2 つの線分の間を渡るように新しい角を生成します。</p> +<p>最後に、<code>stroke-dasharray</code> 属性を指定することで波線状のストロークを描画することもできます。</p> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png"></p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg> +</pre> +<p><code>stroke-dasharray</code> 属性はパラメータとして、一連のカンマ区切りの数値をとります。パスとは異なり、これらの数値はカンマで<em>区切らなければならない</em>ことに注意してください。必要に応じてホワイトスペースを挿入することもできますが、数値同士の間にはカンマを入れなければなりません。それぞれの数値はストロークで塗りつぶす領域の長さ、および塗りつぶさないエリアの長さを指定します。従って前出の例で、2 番目のパスは 5 ピクセル塗りつぶし、次の 5 ピクセルは塗りつぶさない、そしてまた 5 ピクセル塗りつぶすというかたちになります。より複雑な波線のパターンにしたい場合は、より多くの数値を指定することができます。1 番目の例には 3 つの数値があり、この場合レンダラは規則的なパターンを作るために指定した数値を 2 回繰り返します。従って 1 番目のパスは 5 ピクセル塗りつぶし、10 ピクセル空白、5 ピクセル塗りつぶし、そして 5 ピクセル空白、10 ピクセル塗りつぶし、5ピクセル空白を作成するため始めに戻ります。以上のパターンが繰り返されます。</p> +<p>stroke および fille プロパティの付加的なプロパティはさらにいくつかあり、自身が重なり合っている図形でどのように色をつけるかを指定する <code>fill-rule</code>、 ストロークが miter を描画するとき、どこで描画を止めるかを扱う <code>stroke-miterlimit</code>、そして線上で波線の列をどこから始めるかを指定する <code>stroke-dashoffset</code> などです。</p> +<p>{{ 英語版章題("Using CSS") }}</p> +<h2 id="CSS_の利用">CSS の利用</h2> +<p>オブジェクトに属性を設定するのに加えて、CSS を用いて fill や stroke のスタイルをつけることもできます。この構文は <code>background-color</code> や <code>border</code> の代わりに <code>fill</code> や <code>stroke</code> に値を設定する点を除いて、通常の HTML で用いられる CSS と同じです。すべての属性を CSS で指定できるわけではないことは伝えておくべきでしょう。描画や塗りつぶしを扱う属性は利用可能ですので <code>fill</code>、<code>stroke</code>、<code>stroke-dasharray</code> などはこの方法で設定可能です。また、後ほど示すグラデーションやパターン向けの属性も同様です。<code>width</code>、<code>height</code>、あるいはパスのコマンド <code>d</code> は CSS を通して設定できません。何が可能あるいは不可能かをテストして調べるのは、とても簡単です。FF3 の DOM Inspector では、XUL や HTML に加え、SVG の CSS 属性の一覧も表示するようになりました。</p> +<div class="note"><a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG 仕様</a> は<em>{{ 原語併記("プロパティ", "Property") }}</em>である属性とその他の属性を厳密に定めています。前者は CSS で変更できますが、後者はできません。</div> +<p>style 属性を用いて、要素にインラインで CSS を挿入できます:</p> +<pre class="eval"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> +</pre> +<p>もしくは、あなたが入れる特別な style セクションに移すこともできます。そのセクションは HTML で行うように <code><head></code> 内へ入れるのではなく、<a href="/ja/SVG/Element/defs" title="ja/SVG/Element/defs"><code><defs></code></a> と呼ばれるエリアに入れます。<code><defs></code> は定義を意味し、SVG 仕様に直接は見受けられないものの、他の要素から用いられる要素を作成する場所です。</p> +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ + #MyRect { + stroke: black; + fill: red; + } + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg> +</pre> +<p>スタイルをこのようなエリアに移すと、大きな要素グループでのプロパティの調整が容易になります。ロールオーバー効果を作るための <strong>hover 擬似クラス</strong> といったものを用いることもできます:</p> +<pre class="eval"> #MyRect:hover { + stroke: black; + fill: blue; + } +</pre> +<p>ここで一覧を述べることもできますが、学習するには CSS チュートリアルを読む方が良いでしょう。<code>before</code> および <code>after</code> 擬似クラスなど、通常の HTML と異なり動作しないものもありますので、すべてを区分するには少し実験することが必要です。</p> +<p><a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">XML スタイルシート構文</a>を通して、CSS ルールを収めた外部スタイルシートを指定することもできます:</p> +<pre><?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg> +</pre> +<p>style.css は以下のようにします:</p> +<pre>#MyRect { + fill: red; + stroke: black; +} +</pre> +<p>{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Fills_and_Strokes"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/filter_effects/index.html b/files/ja/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..39d1cadb74 --- /dev/null +++ b/files/ja/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,16 @@ +--- +title: Filter effects +slug: Web/SVG/Tutorial/Filter_effects +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +<p>{{ PreviousNext("SVG/Tutorial/Other_content_in_SVG", "SVG/Tutorial/SVG_Fonts") }}</p> +<p>基本的な図形は、ある効果を得るために必要な柔軟性を持っていない場合があります。一般的な例として、影を落とす効果はグラデーションの組み合わせで無理なく作成することができません。フィルタは、複雑な効果を与えることを可能にする SVG の機能です。</p> +<p>基礎的な例として、SVG コンテンツにぼかし (ブラー) 効果を与えます。初歩的なぼかしはグラデーションを活用して実現できますが、より高度なことをするにはぼかしフィルタが必要です。</p> +<h2 id="How_filters_work">How filters work</h2> +<h2 id="The_light_source">The light source</h2> +<h2 id="The_single_filters_explained">The single filters explained</h2> +<p>{{ PreviousNext("SVG/Tutorial/Other_content_in_SVG", "SVG/Tutorial/SVG_Fonts") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Filter_effects"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/getting_started/index.html b/files/ja/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..1ec3e14518 --- /dev/null +++ b/files/ja/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,95 @@ +--- +title: 始めましょう +slug: Web/SVG/Tutorial/Getting_Started +tags: + - Beginner + - NeedsBeginnerUpdate + - SVG + - 'SVG:Tutorial' + - 初心者 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<h3 id="A_Simple_Example" name="A_Simple_Example">簡単な例</h3> + +<p>簡単な例で正しく始めましょう。下のコードを見てください。</p> + +<pre class="brush: xml"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + + <rect width="100%" height="100%" fill="red" /> + + <circle cx="150" cy="100" r="80" fill="green" /> + + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + +</svg> +</pre> + +<p>コードをコピーして、ファイル demo1.svg に貼り付けましょう。そして、ファイルを Firefox で開いてください。これは、下のスクリーンショットを表示するようレンダリングします。(Firefox のユーザは <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">こちら</a> をクリックしてください)</p> + +<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> + +<p>レンダリングプロセスは以下のように関わります:</p> + +<ol> + <li>{{SVGElement("svg")}} ルート要素から始めます: + <ul> + <li>(X)HTML で知られる DOCTYPE 宣言はつけないようにしましょう。なぜなら DTD に基づく SVG のバリデーションは、解決することよりも多くの問題を引き起こします。</li> + <li>他のタイプのバリデーション向けに SVG のバージョンを指定するためには、代わりに <code>version</code> や <code>baseProfile</code> 属性を使用するべきです。 <code>version</code> と <code>baseProfile</code> の両方の属性を付けることは SVG 2 では非推奨です。</li> + <li>XML の派生として、 SVG は (xmlns 属性で) 正しい名前空間に結び付けなければなりません。<a href="/ja/docs/Web/SVG/Namespaces_Crash_Course">名前空間の速修講座</a>に詳細が載っていますのでご覧ください。</li> + </ul> + </li> + <li>画像領域全体を覆う長方形 {{SVGElement("rect")}} を描画することで、背景を赤色にします。</li> + <li>半径が 80px の緑色の円 {{SVGElement("circle")}} を赤色の長方形の中心に描画します (内側に 30+120px、上方に 50+50px のオフセット)。</li> + <li>文字列 "SVG" を描画します。各文字の内側は、白色で塗りつぶします。文字列は、中心点にしたい場所にアンカーを設定することで位置づけられます。この例では、中心点を赤色の長方形の中央と一致させましょう。満足する最終結果を得るように、フォントサイズや上下位置の微調整ができます。</li> +</ol> + +<h3 id="Basic_properties_of_SVG_files" name="Basic_properties_of_SVG_files">SVG ファイルの基本特性</h3> + +<ul> + <li>まず注意すべき重要なことは、要素のレンダリング順序です。 SVG ファイルで全体的に正当な規則では、<em>後の要素</em>が<em>前の要素の上に</em>描画されます。より後にある要素が、より見えるようになるでしょう。</li> + <li>ウェブ上の SVG ファイルはブラウザーで直接表示したり、いくつかの方法で HTML ファイルに埋め込んだりすることができます。 + <ul> + <li>HTML が XHTML で、かつ <code>application/xhtml+xml</code> タイプで配信された場合は、 SVG を XML ソース内に直接埋め込むことができます。</li> + <li>HTML が HTML5 で、かつブラウザーが HTML5 に対応している場合は、同様に SVG を直接埋め込むことができます。ただし、 HTML5 の仕様に適合するよう文法を変えることが必要でしょう。</li> + <li><code>object</code> 要素で SVG ファイルを参照することができます。 + <pre> <object data="image.svg" type="image/svg+xml" /></pre> + </li> + <li>同様に <code>iframe</code> 要素を使用することができます。 + <pre> <iframe src="image.svg"></iframe></pre> + </li> + <li>理論上は <code>img</code> 要素も使用できます。ただし、 Firefox 4.0 より前ではこの方法では動作しません。</li> + <li>最終的に SVG は JavaScript を用いて動的に生成したり、 HTML DOM に挿入したりすることができます。これは SVG を処理できないブラウザー向けの代替技術を実装可能にする利点があります。</li> + </ul> + このトピックに関する詳細情報については、<a href="/ja/docs/SVG_In_HTML_Introduction">こちらの専門記事</a>をご覧ください。</li> + <li>SVG が寸法や単位を管理する方法については<a href="/ja/SVG/Tutorial/Positions">次のページ</a>で説明します。</li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types">SVG ファイルの種類</h3> + +<p>SVG ファイルには2つの種類があります。普通の SVG ファイルは、SVG マークアップを含むシンプルなテキストファイルです。このファイルの推奨される拡張子は ".svg" (すべて小文字) です。</p> + +<p>SVG ファイルは、一部のアプリケーション (例えば、地理情報アプリケーション) で使用される場合、巨大な大きさに達する可能性があるため、 SVG 仕様書では、 gzip 圧縮された SVG ファイルを使用することも許可しています。これらのファイルに推奨されるファイル名の拡張子は ".svgz" (すべて小文字) です。残念ながら、 Microsoft IIS サーバから提供されている場合、すべての SVG 対応ユーザエージェントで gzip 圧縮された SVG ファイルを確実に動作させるには非常に問題があり、 Firefox は gzip 圧縮された SVG をローカルコンピュータから読み込むことができません。 gzip 圧縮された SVG は、正しくサービスを提供してくれることがわかっているウェブサーバに公開する場合を除いては避けてください (以下を参照)。</p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">ウェブサーバーについて</h3> + +<p>さて、基本的な SVG ファイルの作成方法がわかったところで、次の段階はウェブサーバにアップロードすることです。この段階ではいくつかの問題があります。通常の SVG ファイルの場合、サーバーは次の HTTP ヘッダーを送信しなければなりません。</p> + +<pre>Content-Type: image/svg+xml +Vary: Accept-Encoding</pre> + +<p>gzip で圧縮された SVG ファイルの場合は、サーバーは、以下の HTTP ヘッダーを送る必要があります。</p> + +<pre>Content-Type: image/svg+xml +Content-Encoding: gzip +Vary: Accept-Encoding</pre> + +<p>サーバーが SVG ファイルで正しい HTTP ヘッダを送信しているかどうかは、<a href="/ja/docs/Tools/Network_Monitor#Headers">ネットワークモニターパネル</a> や <a class="external" href="https://websniffer.cc/">websniffer.cc</a> などのサイトを使用して確認できます。 SVG ファイルのうちの 1 つの URL を送信し、 HTTP レスポンスヘッダーを確認します。サーバーが上記の値のヘッダーを送信していないことがわかったら、ウェブホストに連絡してください。 SVG 用のサーバーを正しく設定するように説得しにくい場合は、自分で設定するのも良いかもしれません。簡単な解決策については、 w3.org の<a class="external" href="https://www.w3.org/services/svg-server/">サーバー設定ページ</a>を参照してください。</p> + +<p>サーバーの設定ミスは SVG の読み込みに失敗する理由として非常に一般的です。サーバーが正しいヘッダーを SVG ファイルと一緒に送信するように設定されていない場合、 Firefox はファイルのマークアップをテキストや文字化けしたゴミとして表示したり、ビューアにアプリケーションを選択して開くように要求したりする可能性が高いです。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> diff --git a/files/ja/web/svg/tutorial/gradients/index.html b/files/ja/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..a161df6e71 --- /dev/null +++ b/files/ja/web/svg/tutorial/gradients/index.html @@ -0,0 +1,168 @@ +--- +title: SVGにおける階調度 +slug: Web/SVG/Tutorial/Gradients +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Gradients +--- +<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p> + +<p>恐らく，単なる塗り潰しや枠線より刺激的であるのは，塗り潰しや枠線と同様に<ruby>階調度<rp> (</rp><rt>gradients</rt><rp>)</rp></ruby>もまた作成・適用できるという事実でしょう。</p> + +<p>階調度の種別には線状・放射状の二つがあります。当該階調度には<code>id</code>属性を与え<strong>なければならず</strong>，さもなくばファイル内部の他要素が参照できません。階調度は，再利用性を高める為に，〔オブジェクトの〕形状それ自身とは対照的に，<code>defs</code>セクションにおいて定義します。</p> + +<h2 id="線状階調度">線状階調度</h2> + +<p><ruby>線状階調度<rp> (</rp><rt>linear gradients</rt><rp>)</rp></ruby>は真っ直ぐな線に沿って〔色が〕変化します。挿入するには，{{SVGElement('linearGradient')}}ノードをSVGファイルの定義セクションの内部に作成します。</p> + +<h3 id="基本例">基本例</h3> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> + +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop class="stop1" offset="0%"/> + <stop class="stop2" offset="50%"/> + <stop class="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0%" stop-color="red"/> + <stop offset="50%" stop-color="black" stop-opacity="0"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <style type="text/css"><![CDATA[ + #rect1 { fill: url(#Gradient1); } + .stop1 { stop-color: red; } + .stop2 { stop-color: black; stop-opacity: 0; } + .stop3 { stop-color: blue; } + ]]></style> + </defs> + + <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg> +</pre> + +<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> + +<p>上記は<code><rect></code>要素に線状階調度を適用する例です。線状階調度の内部には複数の{{SVGElement('stop')}}ノードがあります。これらのノードは，階調度の或る位置における色を，位置については<code>offset</code>属性，〔色については〕<code>stop-color</code>属性を指定することで定めます。直接又はCSSを通して割り当てられます。本例示用に，二つの手法を混合しています。具体的には，これは階調度に対して赤色から開始し，中間で透過黒色に変化し，そして青色で終了するよう指示しています。必要なだけの美醜たる混合〔色〕を作成する為に，好きなだけ<ruby>停止色<rp> (</rp><rt>stop color</rt><rp>)</rp></ruby>を挿入できますが，<ruby>相対位置<rp> (</rp><rt>offset</rt><rp>)</rp></ruby>は常に0%（又はパーセント記号を省きたいなら0）から100%（又は1）に増加するべきです。値が重複した場合，当該XML木の最遠下で割り当てられた<code><stop></code>要素が用いられます。又，塗り潰し及び枠線と同様に，その場所の透明度を設定するのに<code>stop-opacity</code>属性を指定できます（この場合でも，FF3においてはRGBA値をこの目的に用いることができます）。</p> + +<pre class="brush: xml"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> +</pre> + +<p>階調度を用いるには，対象の<code>fill</code>又は<code>stroke</code>属性からそれを参照せねばなりません。これは，<code>url</code>を用いてCSS中の要素を参照する遣り方と同じことをしています。この場合，当URLは，独特な識別子である「Gradient」を与えた階調度への単なる参照です。適用するには，<code>fill</code>を<code>url(#Gradient)</code>に設定して，ジャジャーン！ <code>stroke</code>についても同じことができます。</p> + +<p><code><linearGradient></code>要素はまた，階調度の大きさ及び見栄えを指定するような他の属性を幾つか持っています。<code>x1</code>，<code>x2</code>，<code>y1</code>，及び<code>y2</code>属性で指定された二点で階調度の方向を制御します。これらの属性は階調度が進み沿う直線を定めます。階調度は水平方向に既定されていますが，これらの属性を変えることで回転させられます。上例におけるGradient2は垂直の階調度を作成するよう設計されています。</p> + +<pre class="brush: xml"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> +</pre> + +<div class="note"> +<p><strong>注意:</strong> 階調度に<code>xlink:href</code>属性を用いることもできます。これを用いた際は，一つの階調度からの〔<code><linearGradient></code>要素の〕属性及び<ruby>色停<rp> (</rp><rt>stop</rt><rp>)</rp></ruby>を別の階調度に組み入れられます。上例においては，Gradient2において全ての色停を再作成しなくてもよくなります。</p> + +<pre class="brush: xml"> <linearGradient id="Gradient1"> + <stop id="stop1" offset="0%"/> + <stop id="stop2" offset="50%"/> + <stop id="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" + xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> +</pre> + +<p>ここではxlink名前空間を，通常は文書の先頭にて定義するにも拘らず，当該ノード上で直接定義しました。詳細は<a href="/ja/docs/Web/SVG/Tutorial/Other_content_in_SVG">画像について説明する際</a>に述べます。</p> +</div> + +<h2 id="放射状階調度">放射状階調度</h2> + +<p>放射状のグラデーションは直線上のグラデーションに似ていますが、ある点から放射状にグラデーションを描画します。これを作成するには <a href="/ja/SVG/Element/radialGradient" title="ja/SVG/Element/radialGradient"><code><radialGradient></code></a> 要素をドキュメントの定義セクションに追加します。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/351/=SVG_Radial_Gradient_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="120" height="240" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> + +</svg> +</pre> + +<p>ここで用いている stop は前出のものと同じですが、ここではオブジェクトの中心が赤色になり、そこから縁の青色に向けて全方向の色が変化します。直線上のグラデーションと同様に、<code><radialGradient></code> ノードも位置や方向を指定する属性を持つことができます。しかし直線上のグラデーションと異なり、これらはやや複雑です。放射状のグラデーションでも 2 つの点が定義され、それらはグラデーションの端がどこかを定義します。1 点目はグラデーションが終わる場所を囲む円を定義します。これは <code>cx</code> および <code>cy</code> 属性で定義する中心と、<code>r</code> 属性で定義する半径が必要です。これら 3 つの属性を設定することで、前出の例の 2 番目の長方形で表したように、グラデーションの中心の移動やサイズの変更ができます。</p> + +<p>2 点目は焦点と呼ばれ、 <code>fx</code> および <code>fy</code> 属性で定義します。1 点目がグラデーションの端がどこかを示すのに対して、焦点はグラデーションの中心がどこかを示します。これは例を見るとわかりやすくなります。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/352/=SVG_Radial_Grandient_Focus_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)" stroke="black" stroke-width="2"/> + + <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> + <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> + <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> + <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> + <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> + +</svg> +</pre> + +<p>焦点が先に定義した円の外側に移動した場合はグラデーションを正しく描画することができませんので、焦点は円の縁にあるものとみなされるでしょう。また焦点を定義しない場合は、円の中心と同じ場所であるとみなします。</p> + +<p>どちらのグラデーションも、{{ 原語併記("変換", "Transformations") }}などさまざまなことを定義する属性を持ちます。その中で、ここで説明したい属性は <code>spreadMethod</code> です。この属性は、グラデーションが終端に達したにもかかわらずオブジェクトがすべて塗りつぶされていない場合にどうするかを制御します。この属性は "pad"、"reflect"、または "repeat" の 3 種類の値をとることができます。"pad" はこれまで見てきたものです。グラデーションが終端に達すると最後の offset の色を、オブジェクトの残りの部分の塗りつぶしに用います。"reflect" はグラデーションを継続しますが、offset が 100% の色から始まり 0% の色へ戻るように逆向きのグラデーションを行い、その後さらに逆向きのグラデーションを行います。"repeat" もグラデーションを継続しますが、逆向きにグラデーションするのではなく最初の色から再びグラデーションを始めます。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/353/=SVG_SpreadMethod_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> + +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25" + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + <rect x="50" y="50" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)"/> +</svg> +</pre> + +<p>余談ですがどちらのグラデーションも、グラデーションのサイズや方向を示すときに用いる単位系を定義する <code>gradientUnits</code> 属性を持ちます。この属性は <code>userSpaceOnUse</code> または <code>objectBoundingBox</code> という値を用いることができます。<code>objectBoundingBox</code> は既定値であり、これまで見てきたものです。この値はグラデーションをオブジェクトのサイズに調整するものであるため座標を 0 から 1 の間の値で指定する必要があり、その値は自動的に対象のオブジェクトの大きさに合わせて調整されます。<code>userSpaceOnUse</code> は絶対的な単位をとります。従ってオブジェクトがどこにあるかを知る必要があり、またグラデーションを同じ場所に置かなければなりません。前出の radialGradient は以下のように書き換えることができます:</p> + +<pre class="eval"> <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse"> +</pre> + +<p><code>gradientTransform</code> 属性を用いてグラデーションを変換させることもできますが、まだ<a href="/ja/SVG/Tutorial/Basic_Transformations" title="ja/SVG/Tutorial/Basic Transformations">{{ 原語併記("変換", "Transformations") }}の紹介</a> を行っていないため、後で説明します。</p> + +<p>以上の他に、オブジェクトを包み込むボックスが長方形ではない場合に <code>gradientUnits="objectBoundingBox"</code> で値を扱うときの注意事項がありますが、それらはやや複雑であり、またそれの説明に詳しい方が現れるのを待たなければなりません。</p> + +<p>{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}</p> + +<p>{{ languages( { "en": "en/SVG/Tutorial/Gradients"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/index.html b/files/ja/web/svg/tutorial/index.html new file mode 100644 index 0000000000..9f8e8840f6 --- /dev/null +++ b/files/ja/web/svg/tutorial/index.html @@ -0,0 +1,55 @@ +--- +title: SVG教本 +slug: Web/SVG/Tutorial +tags: + - MDC Project + - NeedsContent + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial +--- +<p><strong>変倍ベクタ図形</strong> (Scalable Vector Graphics; <a href="/ja/docs/SVG" title="SVG">SVG</a>) は図形をタグ付けするW3CのXML派生言語です。SVGは，Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。</p> + +<p>本教本はSVGの内部構造の説明を目的としており，また技術的詳細が目白押しです。美しい画像を描きたいだけなら，より有用な資料は<a href="https://inkscape.org/learn/">Inkscapeの文書郡</a>にて見付かるでしょう。他に，W3Cの<a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG入門</a>も，良いSVG概説を提供しています。</p> + +<div class="note">このチュートリアルは執筆の非常に早い段階にあります。もしあなたが可能なら、力を貸し、1 つまたは 2 つのパラグラフを書いて手助けしてください。ページ全体を書いていただければ、なお良いです。</div> + +<h5 id="ゼロから始める_SVG_の紹介">ゼロから始める SVG の紹介</h5> + +<ul> + <li><a href="/ja/docs/SVG/Tutorial/Introduction" title="SVG/Tutorial/Introduction">概要</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Getting_Started" title="SVG/Tutorial/Getting_Started">始めましょう</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Positions" title="SVG/Tutorial/Positions">配置</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Basic_Shapes" title="SVG/Tutorial/Basic_Shapes">基本的な図形</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">パス</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Fills_and_Strokes" title="SVG/Tutorial/Fills_and_Strokes">塗りつぶしとストローク</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Gradients" title="SVG/Tutorial/Gradients">階調</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Patterns" title="SVG/Tutorial/Patterns">模様</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Texts" title="SVG/Tutorial/Texts">テキスト</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Basic_Transformations" title="SVG/Tutorial/Basic_Transformations">基本的なトランスフォーム</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Clipping_and_masking" title="SVG/Tutorial/Clipping_and_masking">クリッピングとマスキング</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Other_content_in_SVG" title="SVG/Tutorial/Other content in SVG">他の SVG コンテンツ</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Filter_effects" title="SVG/Tutorial/Filter effects">フィルタ効果</a></li> + <li><a href="/ja/docs/SVG/Tutorial/SVG_Fonts" title="SVG/Tutorial/SVG fonts">SVG フォント</a></li> + <li><a href="/ja/docs/SVG/Tutorial/SVG_Image_Tag" title="SVG/Tutorial/SVG Image Tag">SVG image 要素</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Tools_for_SVG" title="SVG/Tutorial/Tools_for_SVG">SVG のツール</a></li> + <li><a href="/ja/docs/SVG/Tutorial/Other_Tutorials" title="SVG/Tutorial/Other_Tutorials">他のチュートリアル</a></li> +</ul> + +<p>続く話題はより発展的であり、従って各々自身の教本を習得すべきです。</p> + +<h5 id="JavaScript_による_SVG_のスクリプティング">JavaScript による SVG のスクリプティング</h5> + +<p>未定</p> + +<h5 id="SVG_フィルタのチュートリアル">SVG フィルタのチュートリアル</h5> + +<p>未定</p> + +<h5 id="SMIL_を用いた_SVG_のアニメーション">SMIL を用いた SVG のアニメーション</h5> + +<p>未定</p> + +<h5 id="SVG_によるフォント作成">SVG によるフォント作成</h5> + +<p>未定</p> diff --git a/files/ja/web/svg/tutorial/introduction/index.html b/files/ja/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..4312e306ce --- /dev/null +++ b/files/ja/web/svg/tutorial/introduction/index.html @@ -0,0 +1,31 @@ +--- +title: Introduction +slug: Web/SVG/Tutorial/Introduction +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Introduction +--- +<div> + {{PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting Started")}}</div> +<p><img align="right" height="535" src="/@api/deki/files/348/=SVG_Overview.png" width="300"><a href="/ja/docs/SVG" title="SVG">SVG</a> は右に示したようなグラフィックの描画に用いる、 <a href="/ja/docs/XHTML" title="XHTML">XHTML</a> に似ている <a href="/ja/docs/XML" title="XML">XML</a> 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。</p> +<p>SVG は、いくつかの競合するフォーマットが <a href="http://www.w3.org" title="W3C">W3C</a> に提案されたものの承認されなかった後の 1999 年頃に生まれました。仕様書は長い間存在していますがブラウザへの採用はかなり遅く、そのために今日 (2009 年) の Web で用いられている SVG コンテンツは少ない状態です。利用可能な実装でさえ、その多くは <a href="/ja/docs/HTML/Canvas" title="HTML/Canvas">HTML:Canvas</a> や完全なアプリケーションインタフェースとしての Adobe Flash のような競合技術ほど速くない状態です。SVG は実装の一部において、利用が可能な DOM インタフェースを含むことと、デフォルトでブラウザが動作するのにサードパーティの拡張機能を必要としないという利点があります。それを使用するかしないかは、たいていそれを使う目的に依存します。</p> + +<h2 id="Basic_ingredients" name="Basic_ingredients" style="overflow: hidden;">基本的な構成要素</h2> +<p>HTML はヘッダ、段落、テーブルなどを定義する要素を提供します。同様に SVG は円、長方形、単純あるいは複雑な曲線などの要素を提供します。シンプルな SVG ドキュメントは <code>svg</code> ルート要素およびグラフィックを構成するいくつかの基本的な図形のみから成ります。加えて <code>g</code> があり、これはいくつかの基本的な図形をグループ化します。</p> +<p>ここから始めて、SVG 画像を複雑にしていくことができます。SVG はグラデーション、回転、フィルタ効果、アニメーション、JavaScript との連携などをサポートします。しかしこれら言語の追加機能すべては、グラフィックエリアを定義する比較的小さな要素のセットに依存します。</p> +<h2 id="Before_you_start" name="Before_you_start">始める前に</h2> +<p>アプリケーション固有のファイルと同じように SVG を扱うことが出来る <a href="http://www.inkscape.org/">Inkscape</a> のような free な、たくさんの draw アプリケーションがあります。しかし、このチュートリアルでは、信頼できる XML か (あなたが選んだ) テキストエディタを期待しています。このチュートリアルは、SVG の内部を理解したい人向けに作られています。一度 SVG を手書きでマークアップすることは、良い経験になります。それでも、最終的なゴールは意識するべきです。すべての SVG ビューアが同じということはなく、それらアプリが SVG 仕様や SVG と併せて用いる他の仕様 (<a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> や <a href="/ja/docs/CSS" title="CSS">CSS</a>) を異なるレベルでサポートしているため、あるアプリ向けに記述した SVG がほかのアプリでは同じように表示されない可能性があります。</p> +<p>SVG は現行の全ブラウザでサポートされているわけではありません (あと一息ではありますが)。SVG ビューアのかなり完全な一覧が <a href="http://wiki.svg.org/Viewer_Implementations">SVG Wiki</a> にあります。Firefox はバージョン 1.5 から一部の SVG コンテンツをサポートしており、その後のリリースごとにサポートレベルが向上しています。うまくいけばこのチュートリアルと共に MDC が、開発者が Gecko とほかの主要な実装との間の違いを把握することの助けになるでしょう。</p> +<p>始める前に、XML もしくは <abbr title="HyperText Markup Language">HTML</abbr> のような他のマークアップ言語の基本を理解するべきです。もし、XML に精通していなければ、以下に心にとめておく指針があります:</p> +<ul> + <li>SVG 要素および属性は、XML が (HTML とは異なり) 大文字小文字を区別するため、ここで示したとおりに入力しなければ成りません。</li> + <li>SVG の属性値は、たとえ数値でも引用符で囲まれなければなりません。</li> +</ul> +<p>SVG の仕様は巨大です。このチュートリアルは、初めの一歩を踏み出すためだけの範囲を担当しています。一度 SVG の基本に精通したら、知りたいことを見つけるために『<a href="/ja/docs/SVG/Element" title="SVG/Element">SVG 要素リファレンス</a>』 と、『<a href="/ja/docs/SVG/Interface" title="SVG/Interface">Interface Reference</a>』({{todo("デッドリンク")}}) を見てみるべきです。</p> +<h2 id="Flavors_of_SVG" name="Flavors_of_SVG">SVG の種類</h2> +<p>2003 年に勧告が成立して以降、最新の "完全な" SVG バージョンは 1.1 です。これは SVG 1.0 の上に構築したものですが、実装を容易にするためにモジュール化が進みました。SVG 1.1 の第 2 版が現在策定中です。"完全な" SVG 1.2 は、次の SVG のメジャーリリースを意味していました。それは将来の SVG 2.0 のために破棄され、そして SVG 2.0 は現在鋭意開発中であり構成要素をいくつかの緩く結合した仕様に分割する、CSS 3 と似た手法をとっています。</p> +<p>完全な SVG 勧告からは離れて、W3C のワーキンググループは 2003 年に SVG Tiny と SVG Basic を導入しました。これら 2 つのプロファイルは、主にモバイルデバイスを対象にしています。SVG Tiny は、性能が低い小型デバイス向けに図形要素をもたらすでしょう。SVG Basic は完全な SVG が持つ機能の多くを提供しますが、実装が難しい機能や描画負荷の高い機能 (アニメーションなど) は含みません。2008年に、SVG Tiny 1.2 が W3C 勧告になりました。</p> +<p>SVG 印刷の仕様の計画があり、これは複数のページや高度なカラーマネージメントのサポートを追加する予定でした。この作業は休止しています。</p> +<div> + {{PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting Started")}}</div> diff --git a/files/ja/web/svg/tutorial/other_content_in_svg/index.html b/files/ja/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..1b1aa2a6a0 --- /dev/null +++ b/files/ja/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,30 @@ +--- +title: Other content in SVG +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p> +<p>長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。</p> +<p>{{ 英語版章題("Embedding raster images") }}</p> +<h3 id="ラスターイメージの埋め込み">ラスターイメージの埋め込み</h3> +<p>HTML における img 要素と同様に、SVG には同じ用途の <code>image</code> 要素があります。これを用いて、任意のラスター (およびベクター) イメージを埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。</p> +<p>埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることが出ます:</p> +<pre><svg version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + width="200" height="200"> + <image x="90" y="-65" width="128" height="146" transform="<strong>rotate(45)</strong>" + xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/> +</svg> +</pre> +<p><img alt="imagedemo.png" class="internal default" src="/@api/deki/files/4949/=imagedemo.png" style=""></p> +<p>{{ 英語版章題("Embedding arbitrary XML") }}</p> +<h3 id="任意の_XML_の埋め込み">任意の XML の埋め込み</h3> +<p>SVG は XML アプリケーションであることから、<em>常に</em> SVG ドキュメント内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に <code>{{ SVGElement("foreignObject") }}</code> 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する <code>width</code> および <code>height</code> です) のキャリアになることです。</p> +<p><code>foreignObject</code> 要素は、SVG に XHTML を埋め込むのによい手段です。長いテキストがある場合、SVG の <code>text</code> 要素より HTML のレイアウトの方がより適切かつ使いやすくなります。他によく挙げられる使い方として、MathML の式の埋め込みがあります。これは SVG を科学分野で応用する場合に、SVG と MathML を統合するためにとてもよい方法です。</p> +<div class="note"><strong>注意:</strong> <code>foreignObject</code> の内容物は、ビューアによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。</div> +<p><code>foreignObject</code> は SVG の要素ですので、<code>image</code> と同様に SVG のあらゆる技術を用いることができ、そしてそれは <code>foreignObject</code> の内容物に適用されます。</p> +<p>{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Other_content_in_SVG"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/paths/index.html b/files/ja/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..170fe2e21d --- /dev/null +++ b/files/ja/web/svg/tutorial/paths/index.html @@ -0,0 +1,266 @@ +--- +title: Paths +slug: Web/SVG/Tutorial/Paths +tags: + - Intermediate + - SVG + - SVG チュートリアル + - 'SVG:Tutorial' + - 中級者向け +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p>{{SVGElement('path')}} 要素は、 SVG の<a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">基本図形</a>ライブラリの中でもっとも強力な要素です。これは、直線、曲線、弧などを作成するために用いることができます。</p> + +<p>パスは、複数の直線や曲線を組み合わせて複雑な形状を作ります。直線だけで構成された複雑な形状は、 <a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline"><code><polyline></code></a> として作成することができます。 <code><polyline></code> と <code><path></code> は似たような形状を作ることができますが、 <code><polyline></code> は曲線を表現するのに大量の小さな直線を必要とするため、大きなサイズにはうまく拡大することができません。</p> + +<p>SVG を描画する際には、パスをよく理解しておくことが重要です。XML エディターやテキストエディターを使用して複雑なパスを作成する野はお勧めできませんが、それらがどのように機能するかを理解しておけば、 SVG の表示問題を特定して修復することができます。</p> + +<p><code><path></code> 要素の形状は、1つの引数である {{ SVGAttr("d") }} によって定義されます (詳細は<a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">基本図形</a>を参照してください)。 <code>d</code> 属性はこれらのコマンドで使用される一連のコマンドと引数を含みます。</p> + +<p>それぞれのコマンドは、特定の文字でインスタンス化されています (例えば、クラスを作成したり、名前を付けたり、位置を特定したりします)。例えば、 x と y の座標 (<code>10</code>, <code>10</code>) に移動してみましょう。 "Move to" コマンドは <code>M</code> という文字で呼び出されます。パーサーはこの文字に遭遇したとき、ある点に移動する必要があることを知っています。したがって、 (<code>10</code>,<code>10</code>) に移動するためのコマンドは <code>M 10 10</code> となります。その後、パーサーは次のコマンドを読み始めます。</p> + +<p>すべてのコマンドは 2 つの種類があります。<strong>大文字</strong>はページ上の絶対座標を指定し、<strong>小文字</strong>は相対座標 (例えば、 <em>直前の点から上に 10px、左に 7px 移動</em>) を指定します。</p> + +<p><code>d</code> 属性の座標は <strong>常に単位なし</strong> で指定するので、ユーザー座標システムになります。後のチュートリアルで、どのようにパスを他のニーズに合わせて変形できるかを学びます。</p> + +<h2 id="Line_commands" name="Line_commands">直線コマンド</h2> + +<p>{{SVGElement("path")}} ノードには、直線のコマンドが 5 つあります。1つ目のコマンドは "Move To" すなわち <code>M</code> で、前述したものです。これは2つの引数、移動先の座標 (<code>x</code>) と座標 (<code>y</code>) を取ります。カーソルがすでにページ上のどこかにあった場合は、2 つの位置を結ぶ線は描画されません。 "Move To" コマンドは、どこから描画を始めるかを指定するパスの始点に見られます。</p> + +<pre class="syntaxbox notranslate"><strong>M</strong> <var>x</var> <var>y</var> +(または) +<strong>m</strong> <var>dx</var> <var>dy</var> +</pre> + +<p>以下の例では点 (<code>10</code>,<code>10</code>) だけがある状態になります。ただし、パスだけを描画してもこれらの点が表示されないことに注意してください。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml notranslate"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>線を描画するコマンドは 3 種類あります。もっとも一般的なものは、 "Line To" コマンド、すなわち <code>L</code> です。 <code>L</code> は 2 つの引数—x および y 座標—を持ち、現在の位置から新しい位置に向けて直線を描画します。</p> + +<pre class="syntaxbox notranslate"> <strong>L</strong> <var>x</var> <var>y</var> + (または) + <strong>l</strong> <var>dx</var> <var>dy</var> +</pre> + +<p>水平または垂直の線を描画するための短縮あ形式があります。 <code>H</code> は水平線を描画、<code>V</code> は垂直線を描画します。どちらのコマンドも一方向にしか移動しないので、引数は 1 つだけです。</p> + +<pre class="syntaxbox notranslate"> <strong>H</strong> <var>x</var> + (または) + <strong>h</strong> <var>dx</var> + + <strong>V</strong> <var>y</var> + (または) + <strong>v</strong> <var>dy</var> +</pre> + +<p>始めやすいところは実際に図形を描いてみることです。手始めに長方形 ({{SVGElement("rect")}} 要素を使うとより簡単に描けるものと同じです) を描いてみましょう。これは水平線と垂直線だけで構成されています。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml notranslate"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M 10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- Points --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>最後に "Close Path" コマンドである <code>Z</code> を用いることで、前出のパスを少し短くすることができます。このコマンドは、現在の位置からパスの始点である最初の点へ戻る直線を描画します。常にパスを閉じる必要はありませんが、パスノードの終端によく置かれます。外見上、大文字コマンドと小文字コマンドの違いはありません。</p> + +<pre class="syntaxbox notranslate"> <strong>Z</strong> + (or) + <strong>z</strong> +</pre> + +<p>したがって、上記のパスは次のように簡単に書くことができます。</p> + +<pre class="brush: xml notranslate"> <path d="M 10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>同じ画像を描画するために、これらコマンドの相対形式を用いることもできます。前に述べたとおり相対形式のコマンドは小文字を用いて表記され、厳密な座標でカーソルを移動するのではなく直前の位置から相対的に移動します。例えば、ここで描いた四角形のサイズは 80x80 であるので、 <code><path></code> 要素は以下のように書くことができます:</p> + +<pre class="brush: xml notranslate"> <path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>パスは点 (<code>10</code>,<code>10</code>) に移動した後、右へ水平に点 80 個分、下に点 80 個分、左に点 80 個分、そして始点へ戻るように移動します。</p> + +<p>これらの例では、おそらく {{SVGElement("polygon")}} や {{SVGElement("polyline")}} 要素を使用すると、より簡潔に書くことができます。しかし、パスは SVG で描画する際に頻繁に使用されるので、開発者はこれらの代わりにパスを使用した方が快適かもしれません。どちらを使用しても、性能上の利点や欠点はありません。</p> + +<h2 id="曲線コマンド">曲線コマンド</h2> + +<p>なめらかな曲線を作成するために使うコマンドは 3 種類あります。 2 つはベジェ曲線、3 つめは "円弧" すなわち円の一部です。すでに Inkscape, Illustrator, Photoshop などのパスツールを使用して、ベジェ曲線の実体験をしているかもしれません。ベジェ曲線の背景の数学的な説明については、<a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Wikipedia</a> (<a class="external" href="http://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">日本語版</a>) などのリファレンスを参照してください。ベジェ曲線には無数の異なる種類がありますが、 <code><path></code> 要素ではシンプルな 2 種類だけが使用可能です。三次ベジェ曲線の <code>C</code> と、二次ベジェ曲線の <code>Q</code> です。</p> + +<h3 id="Bézier_Curves" name="Bézier_Curves">ベジェ曲線</h3> + +<p>まずは、やや複雑なベジェ曲線である三次ベジェ曲線 から始めましょう。三次ベジェ曲線は、各々の点に対する 2 つの制御点をとります。従って、三次ベジェ曲線を作成したいときは 3 組の座標を指定しなければなりません。</p> + +<pre class="syntaxbox notranslate"> <strong>C</strong> <var>x1</var> <var>y1</var>, <var>x2</var> <var>y2</var>, <var>x</var> <var>y</var> + (または) + <strong>c</strong> <var>dx1</var> <var>dy1</var>, <var>dx2</var> <var>dy2</var>, <var>dx</var> <var>dy</var> +</pre> + +<p>ここで最後にある座標 (<code><var>x</var></code>,<code><var>y</var></code>) は、線の終点にしたい場所です。他の 2 組は制御点です。 (<code><var>x1</var></code>,<code><var>y1</var></code>) は曲線の始点向けの制御点、 (<code><var>x2</var></code>,<code><var>y2</var></code>) は曲線の終点向けの制御点です。制御点は各々の点から始まる線の傾斜を本質的に説明するものです。このときベジェ関数は、線の始めで確立した傾斜からもう一方の側の傾斜へ至るなめらかな曲線を作成します。</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bézier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml notranslate"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M 70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>上の例では 9 つのベジェ曲線を作成しています。曲線が左側へ移動するにつれて、制御点は水平方向に離れていきます。また曲線が右側へ移動するにつれて、制御点は終点から遠く離れていきます。ここで特筆することは、曲線は 1 番目の制御点に向かって出発し、そして 2 番目の制御点の方向に沿って到着するということです。</p> + +<p>長いなめらかな図形を描くために、複数のベジェ曲線をつなぐことができます。この場合はたいてい、ある点の片方の制御点はもう一方で使われる制御点の対向になるでしょう (傾斜を一定に保つ場合)。この場合はコマンド <code>S</code> (または <code>s</code>) で示される、三次ベジェ曲線の短縮版を用いることができます。</p> + +<pre class="syntaxbox notranslate"> <strong>S</strong> <var>x2</var> <var>y2</var>, <var>x</var> <var>y</var> + (または) + <strong>s</strong> <var>dx2</var> <var>dy2</var>, <var>dx</var> <var>dy</var> +</pre> + +<p><code>S</code> は前に示したものと同種の曲線を生成しますが、これが別の <code>S</code> コマンドや <code>C</code> コマンドの後に続く場合は、1 番目の制御点が前を曲線で用いられた制御点の対向にするものとみなします。<code>S</code> コマンドが別の <code>S</code> または <code>C</code> コマンドの後にない場合は、その曲線の 2 つの制御点は同じ場所であるとみなします。この場合は、 <code>Q</code> コマンドに同じ引数を与えて出力する結果と同じ結果になります。</p> + +<p>この構文の例を以下に示しますが、左の図では、指定された制御点が赤、推定された制御点が青で示されています。</p> + +<p><img alt="ShortCut_Cubic_Bézier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bézier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml notranslate"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>もう一つの種類のベジェ曲線は二次ベジェ曲線 <code>Q</code> であり、こちらは三次ベジェ曲線よりシンプルな曲線です。基本的に制御点を 1 つだけ必要とし、それは始点側と終点側両方の曲線の傾斜を定義します。このコマンドは制御点と曲線の終点を示す 2 つの引数を持ちます。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>q</code> コマンドにおける座標の差分は、どちらも前回の点からの相対座標です (すなわち <code>dx</code> と <code>dy</code> は <code>dx1</code> と <code>dy1</code> に対する相対座標ではありません)。</p> +</div> + +<pre class="syntaxbox notranslate"> <strong>Q</strong> <var>x1</var> <var>y1</var>, <var>x</var> <var>y</var> + (または) + <strong>q</strong> <var>dx1</var> <var>dy1</var>, <var>dx</var> <var>dy</var> +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bézier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml notranslate"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>三次ベジェ曲線の場合と同様に、二次ベジェ曲線のセットをつなぎ合わせるためのショートカットである <code>T</code> があります。</p> + +<pre class="syntaxbox notranslate"> <strong>T</strong> <var>x</var> <var>y</var> + (or) + <strong>t</strong> <var>dx</var> <var>dy</var> +</pre> + +<p>このショートカットは前に用いた制御点を参照して、そこから新しい制御点を推測します。これは、最初の制御点を指定した後は終点を指定するだけで、ある程度複雑な図形を作成できることを意味します。</p> + +<p>このコマンドは前のコマンドが <code>Q</code> または <code>T</code> コマンドである場合のみ動作します。そうではない場合、制御点は前の点と同じであるとみなして直線が描画されるだけになります。</p> + +<p><img alt="Shortcut_Quadratic_Bézier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bézier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml notranslate"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>三次ベジェ曲線はどのような曲線を描きたいかについて自由度が高いにもかかわらず、どちらの曲線もかなり似た結果になります。どちらの曲線を用いるかはたいてい、そのときの状況や曲線の対称度に依存します。</p> + +<h3 id="Arcs" name="Arcs">円弧</h3> + +<p>SVG を用いて作成できる別のタイプの曲線が円弧 <code>A</code> コマンドです。円弧の本質は円または楕円の一部分です。</p> + +<p>与えられた X 軸と Y 軸の半径について、2 つの点に接する楕円は (それらが円の半径の範囲内にある限り) 2 つあります。どちらにも 2 点を結ぶパスが 2 つずつあるため、どのような場合でも考えられる円弧は 4 つあります。</p> + +<p>このため、円弧はかなり多くの引数をとります。</p> + +<pre class="syntaxbox notranslate"> <strong>A</strong> <var>rx</var> <var>ry</var> <var>x-axis-rotation</var> <var>large-arc-flag</var> <var>sweep-flag</var> <var>x</var> <var>y</var> + <strong>a</strong> <var>rx</var> <var>ry</var> <var>x-axis-rotation</var> <var>large-arc-flag</var> <var>sweep-flag</var> <var>dx</var> <var>dy</var> +</pre> + +<p>始めに arc 要素は、円弧の X 軸方向の半径と Y 軸方向の半径を示す 2 つの引数を持ちます。必要に応じて {{SVGElement("ellipse")}} で同動作するかを確認してください。後の2つの引数は、描画が終了する X および Y 座標を示します。</p> + +<p>3 番目の引数は、円弧の回転度を示します。これは次の説明が最適です。</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml notranslate"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M 10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>この例ではページを斜めに渡る <code><path></code> 要素を示しています。その中間で、2 つの楕円弧 (X 軸方向の半径 = <code>30</code>、Y 軸方向の半径 = <code>50</code>) が切り抜かれています。1 番目の円弧は x-axis-rotation が <code>0</code> であるので、円弧が通る楕円 (灰色で示しています) は直立しています。一方 2 番目の円弧では、 x-axis-rotation が <code>-45</code> 度になっています。これは円弧を回転させるので、例の図にあるとおり 2 番目の楕円の短半径がパスの方向に沿うよう一直線に並びます。</p> + +<p>上の画像の回転していない楕円については、円弧の始点と終点から引かれた線が楕円の中心を通るので、 2 つの異なる円弧があるだけで、 4 つの円弧から選択できるわけではありません。少し修正した例では、 4 つの異なる円弧を形成する 2 つの楕円を見ることができます。</p> + +<p><img alt="Show the 4 arcs on the Ellipse example" src="https://mdn.mozillademos.org/files/15822/SVGArcs_XAxisRotation_with_grid_ellipses.png" style="height: 320px; width: 320px;"></p> + +<pre class="brush: xml notranslate"><svg xmlns="http://www.w3.org/2000/svg" width="320" height="320"> + <path d="M 10 315 + L 110 215 + A 36 60 0 0 1 150.71 170.29 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> + <circle cx="150.71" cy="170.29" r="2" fill="red"/> + <circle cx="110" cy="215" r="2" fill="red"/> + <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/> + <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/> +</svg> +</pre> + +<p>青い楕円は、時計回りか反時計回りかによって、2つの円弧を描いていることに注意してください。それぞれの楕円には、短い円弧と長い円弧がある。2つの楕円は互いに鏡像になっている。これらの楕円は、開始点→終了点から形成された線に沿って反転している。</p> + +<p>開始点→終了点が楕円の <code><var>x</var></code>, <code><var>y</var></code> 半径が到達できる距離よりも遠い場合、楕円の半径は最小に拡大され、開始点→終了点に到達できるようになります。このページの一番下にあるインタラクティブなコードペンがこのことをよく示しています。楕円の半径が拡大を必要とするほど大きいかどうかを判断するには、<a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F36%5E2)+%2B+((215+-+y)%5E2%2F60%5E2)+%3D+1,+((150.71+-+x)%5E2%2F36%5E2)+%2B+((170.29+-+y)%5E2%2F60%5E2)+%3D+1">このような方程式系</a>を解く必要があります。この計算は、開始→終了 (<code>110</code>, <code>215</code>)→(<code>150.71</code>, <code>170.29</code>) の非回転楕円についてのものです。解 (x, y) は楕円の中心である．楕円の半径が小さすぎると、解は<a href="https://www.wolframalpha.com/input/?i=solve+((110+-+x)%5E2%2F30%5E2)+%2B+((215+-+y)%5E2%2F50%5E2)+%3D+1,+((162.55+-+x)%5E2%2F30%5E2)+%2B+((162.45+-+y)%5E2%2F50%5E2)+%3D+1">虚数</a>になります。この2番目の計算は、開始→終了 (<code>110</code>, <code>215</code>)→(<code>162.55</code>, <code>162.45</code>) の非回転楕円の場合です。楕円がかろうじて拡大されただけなので、この解には小さな虚数成分が含まれています。</p> + +<p>前述した4つの異なるパスは、次の2つのパラメータフラグによって決定されます。前述したように、パスが移動する楕円にはまだ2つの可能性があり、両方の楕円上には2つの異なる可能性のあるパスがあり、4つの可能性のあるパスが与えられます。最初のパラメータは <code><var>large-arc-flag</var></code> です。これは単純に円弧が 180 度より大きいか小さいかを決定します。2 番目のパラメータは <code><var>sweep-flag</var></code> フラグです。これは、円弧が正の角度で動き始めるか負の角度で動き始めるかを決定します。以下の例は、4 つの可能性のあるすべての組み合わせと、それぞれの場合の 2 つの円を示しています。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml notranslate"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M 80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M 230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M 80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M 230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p>円弧は、図面の中で円や楕円のピースを簡単に作成する方法です。例えば、円グラフでは、各ピースごとに異なる円弧が必要になります。</p> + +<p>から SVG に移行する場合、弧は習得するのが最も難しいものですが、はるかに強力なものになります。完全な円と楕円だけは、 SVG の円弧が苦手な形状です。円の周りを回るあらゆるパスの始点と終点が同じ点であるため、選択できる円の数は無限にあり、実際のパスは不定になるからです。パスの始点と終点を少しずらして、別のパスセグメントでつなぐことで近いものを描くことができます。例えば、半円ごとに円弧を描くことも可能です。このような場合は、実際の {{SVGElement("circle")}} や {{SVGElement("ellipse")}} ノードを使った方が簡単なことが多いです。<a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> のインタラクティブなデモは、 SVG の円弧の背後にある概念を理解するのに役立つかもしれません。 (Chrome と Firefox のみでテストしました。お使いのブラウザでは動作しないかもしれません)。</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/ja/web/svg/tutorial/patterns/index.html b/files/ja/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..e0b7fcd4fb --- /dev/null +++ b/files/ja/web/svg/tutorial/patterns/index.html @@ -0,0 +1,74 @@ +--- +title: Patterns +slug: Web/SVG/Tutorial/Patterns +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> + +<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern" title="ja/SVG/Element/pattern"><code><pattern></code></a> 要素は SVG ファイルの <code><defs></code> セクションに置かなければなりません。</p> + +<p><img alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png" style="float: right;"></p> + +<pre><?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> +</svg> +</pre> + +<p>pattern 要素の内部には先に入れた他の基本図形を含めることができ、それらの図形は前に学習したスタイルを用いてグラデーションや不透明度などの装飾を設定することができます。ここではパターンの内部に 2 つの長方形 (これらは重なっており、片方はもう片方の 2 倍のサイズでパターン全体を埋めています) と 1 つの円を描画しています。</p> + +<p>パターンについてわかりにくいことは、単位系の定義とパターンのサイズです。前出の例ではパターンを繰り返し始めるまでどれくらいの距離をおくべきかを示すために、pattern 要素で <code>width</code> および <code>height</code> 属性を定義しました。また、描画内のどこかへパターンの長方形の開始点をずらしたい場合は、 <code>x</code> および <code>y</code> 属性を利用できます。それら属性をここで用いた理由は、後ほど説明します。</p> + +<p>以前 <code>gradientUnits</code> 属性を用いたように、パターンでも同様に <code>width</code> などの属性で用いる単位を指定する、<code>patternUnits</code> 属性があります。前出の例のように既定値は "objectBoundingBox" であり、1 という値はパターンを適用するオブジェクトの幅や高さに調整されます。今回の例ではパターンを水平および垂直方向に 4 回繰り返したいので、height および width は 0.25 に設定します。つまりパターンの幅および高さは、ボックス全体のサイズの 0.25 倍になります。</p> + +<p>グラデーションとは異なり、パターンには第 2 の属性 <code>patternContentUnits</code> があり、これは pattern 要素内の基本図形自身が用いる単位系を示します。この属性の既定値は "userSpaceOnUse" であり、<code>patternUnits</code> 属性とは逆です。よって、これらの属性 (<code>patternContentUnits</code> および <code>patternUnits</code>) の片方あるいは両方を指定しないと、パターン内に描画する図形は pattern 要素で用いるのとは異なる座標系で描画されることになり、要素を手書きで記述する際に少々わかりにくくなるかもしれないことを意味します。前出の例でこの作業を行うにはボックスのサイズ (200 ピクセル) と、パターンを水平および垂直方向に 4 回繰り返したいという事実を考慮しなければなりませんでした。よって、パターンの 1 単位は 50x50 ピクセルの正方形でした。そしてパターン内にある 2 つの長方形と円は 50x50 ピクセルのボックスに収まるサイズでした。このボックスの外側に描画した図形等は、表示されません。また、パターンがボックスの左上隅から始まるように 10 ピクセルずらす必要がありましたので、pattern の x および y 属性を 10/200 = 0.05 に調整しました。</p> + +<p>ここでの注意点は、オブジェクトのサイズが変わった場合にパターンそのものは見合うサイズに調整されますが、内部のオブジェクトは調整されないことです。従ってパターン内では 4 回ユニットを繰り返しますが、パターンを構成するオブジェクトは同じサイズのままになりますので、オブジェクトの間に何もない大きなエリアができあがってしまいます。<code>patternContentUnits</code> 属性を変更することで、すべての要素で同じ単位系を用いることができます:</p> + +<pre class="eval"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>これでパターンとパターン内のコンテンツが同じ単位系になることから、パターンが正しい位置から始まるようにボックスをずらす必要がなくなり、またオブジェクトのサイズが大きくなった場合でもオブジェクト内に同じ数のパターンが入るようにパターンのサイズが自動的に調整されます。またその内部でも、同じことを行います。これは、"userSpaceOnUse" システムと対照的です。こちらはオブジェクトのサイズが変わってもパターンのサイズはそのままであり、ボックスを埋めるためにパターンをより多く繰り返します。</p> + +<p>余談ですが、Gecko では円の半径が 0.075 より小さいときに描画の不具合が発生するようです (それより大きい半径になるよう拡大すべきであるにもかかわらず。これは pattern 要素のバグかもしれませんし、あるいはバグではないかもしれませんが、私にはよくわかりません)。これの回避法は、必要がなければ "objectBoundingBox" の単位を用いて描画することを避けるのが最善でしょう。</p> + +<p>これまで見てきた 2 つの使い方はいずれも、パターンについて考えるときに通常は思いつかないでしょう。パターンは通常サイズが決まっており、またそれ自身をオブジェクトの形状に関係なく繰り返します。このようなパターンを作成するには、パターンとその内容物は現在の userSpace 内に描画しなければならず、そのためにオブジェクトの形状が変化してもパターンの形状は変わりません:</p> + +<pre class="eval"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>もちろん、これは後からオブジェクトのサイズを変えてもパターンのサイズは調整されないことを意味します。前出の 3 種類の例について、長方形の高さを 300px に広げたものを以下に示しましたが、これはすべてを網羅した画像ではなく、また目的に応じて利用可能なオプションが他にもあることを注記したいと思います。</p> + +<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png">o</p> + +<p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> + +<p>{{ languages( { "en": "en/SVG/Tutorial/Patterns"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/positions/index.html b/files/ja/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..ade0c5a9c1 --- /dev/null +++ b/files/ja/web/svg/tutorial/positions/index.html @@ -0,0 +1,33 @@ +--- +title: Positions +slug: Web/SVG/Tutorial/Positions +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}</p> +<p>{{ 英語版章題("The grid") }}</p> +<h2 id="The_grid" name="The_grid">グリッド</h2> +<p><img align="right" alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="">すべての要素向けに、SVG は <a href="/ja/HTML/Canvas" title="ja/HTML/Canvas">canvas</a> (あるいはその他多くのコンピュータによる描画ルーチン) で使われているものと似た座標システムまたはグリッドシステムを用います。これは、ドキュメントの左上隅を点 (0, 0) として考えます。よって位置は、左上隅から右方向へ伸びる正の X 軸と下方向へ伸びる正の Y 軸により、ピクセル数で測定されます。この座標は、子供の頃に教わったグラフのものとは逆向きであることに注意してください。しかし、これは HTML の要素を配置する場合と同じです。</p> +<h4 id="例">例:</h4> +<p>以下の要素は、左上隅から右および下へ 100px の範囲を占める長方形を表します。</p> +<pre><rect x="0" y="0" width="100" height="100" /> +</pre> +<p>{{ 英語版章題("What are .22pixels.22.3F") }}</p> +<h3 id="ピクセル_とは">"ピクセル" とは</h3> +<p>ほとんどの基本的なケースにおいて、SVG ドキュメントの 1 ピクセルは出力デバイス (例えばスクリーン) の 1 ピクセルに対応します。 しかしこの動作を変えることができないのであれば、SVG の名称内に "Scalable" はなかったでしょう。CSS のフォントサイズで絶対値と相対値があるように、SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、単位が欠落して数値だけのいわゆる{{ 原語併記("ユーザー単位", "user units") }}があります。</p> +<p>特に明示しなければ、1 ユーザー単位は 1 スクリーン単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の <code>svg</code> ルート要素から始める場合:</p> +<pre><svg width="100" height="100"> +</pre> +<p>上記の要素は、100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 スクリーン単位と同じです。</p> +<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> +</pre> +<p>この場合、SVG キャンバス全体のサイズは縦横ともに 200px です。しかし <code>viewBox</code> 属性が、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0, 0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。</p> +<p>現行の (単一の要素またはイメージ全体への) ユーザー単位とスクリーン単位間のマッピングは、<strong>{{ 原語併記("ユーザー座標系", "user coordinate system") }}</strong> と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。デフォルトのユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。</p> +<p>これを説明する SVG 1.1 の仕様を引用します:</p> +<blockquote> <p>[...] suppose that the user agent can determine from its environment that "1px" corresponds to "0.2822222mm" (i.e., 90dpi). Then, for all processing of SVG content: [...] "1cm" equals "35.43307px" (and therefore 35.43307 user units)</p> <p><code>{{ 訳注("以下は参考訳文") }}</code>(前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。</p> +</blockquote> +<p>{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}</p> +<p><span class="comment">Interwiki Languages Links</span></p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Positions", "fr": "fr/SVG/Tutoriel/Positionnement"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/svg_fonts/index.html b/files/ja/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..d70ec7a252 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,78 @@ +--- +title: SVG Fonts +slug: Web/SVG/Tutorial/SVG_Fonts +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +<p>{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial/SVG_Image_Tag") }}</p> +<p>SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。</p> +<div class="note">ブラウザでの SVG フォントのサポートは、広く行われているとは言えません。Opera の他、WebKit ブラウザ (デスクトップおよびモバイル) だけがフォントを表示できます。Firefox は <a href="/ja/WOFF" title="ja/About WOFF">WOFF</a> へ集中するために、SVG フォントの実装を無期限に延期しました。しかし他のツール、たとえば Adobe SVG Viewer、Batik、Inkscape の一部は SVG フォントをサポートしています。</div> +<p>SVG フォントを定義するための基盤は {{ SVGElement("font") }} 要素です。</p> +<p>{{ 英語版章題("Defining a font") }}</p> +<h2 id="フォントの定義">フォントの定義</h2> +<p>フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (<a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">仕様書</a> で示されている) 宣言の例、その後に詳しい説明を示します。</p> +<pre><font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font> +</pre> +<p>まずは {{ SVGElement("font") }} 要素から始まります。これは id 要素を持っており、それは URI を通してフォントを参照する (後述) ために必要です。<code>horiz-adv-x</code> 属性は 1 つのグリフのパス定義に比べて、文字の幅を平均してどのくらい広げるかを定義します。値 <code>1000</code> は、作業を行うにあたりほどよい値を設定します。また、基本的なグリフボックスのレイアウトをさらに定義するための付随的な属性がいくつかあります。</p> +<p>{{ SVGElement("font-face") }} 要素 CSS の <a href="/Ja/CSS/@font-face" title="ja/css/@font-face"><code>@font-face</code></a> 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは <code>font-family</code> です。この値は、CSS や SVG の <code>font-family</code> プロパティで参照することができます。<code>font-weight</code> および <code>font-style</code> 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのが<a class="external" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29" title="http://en.wikipedia.org/wiki/Ascender_(typography)">アセンダ</a>です。</p> +<p><code>font-face</code> 要素の子要素である {{ SVGElement("font-face-src") }} 要素は、CSS の <code>@font-face</code> 宣言の <code>src</code> プロパティに対応します。子要素の {{ SVGElement("font-face-name") }} や {{ SVGElement("font-face-uri") }} を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。</p> +<p>{{ SVGElement("font-face-src") }} の後に {{ SVGElement("missing-glyph") }} 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、{{ SVGElement("filter") }}、{{ SVGElement("a") }}、あるいは {{ SVGElement("script") }} といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、path 要素の場合と同じ働きである <code>d</code> 属性を追加することもできます。</p> +<p>実際のグリフは {{ SVGElement("glyph") }} 要素で定義します。ここで最も重要な属性は <code>unicode</code> です。この属性は Unicode のコードポイントを定義して、その文字が <code>glyph</code> 要素で示すグリフで表現されます。<code>lang</code> 属性を指定した場合は、さらにグリフを特定の言語 (フォントを使用する側の <code>xml:lang</code> で示されます) のみに限定することができます。繰り返しになりますがグリフを定義するために任意の SVG を用いることができ、またユーザエージェントが対応するすばらしいエフェクトを用いることもできます。</p> +<p><code>font</code> 内で定義することができる要素がさらに 2 つあり、それは {{ SVGElement("hkern") }} と {{ SVGElement("vkern") }} です。それぞれの実体は少なくとも 2 つの文字を参照し、また k 属性はそれらの文字の間の距離をどれだけ縮めるかを定義します。初歩的な例は "A" と "V" であり、レンダラーは "AV" という文字列を、単独の文字が暗に定義する距離よりも間隔を狭くして配置します。</p> +<pre><hkern u1="A" u2="V" k="20" /> +</pre> +<p>{{ 英語版章題("Referencing a font") }}</p> +<h2 id="フォントの参照">フォントの参照</h2> +<p>これはとても単純です。これまで説明したようにフォントの宣言をひとまとめに収めた場合は、<code>font-family</code> 属性を用いるだけでよいのです。</p> +<pre><font> + <font-face font-family="Super Sans" /> + <!-- and so on --> +</font> + +<text font-family="Super Sans">My text uses Super Sans</text> +</pre> +<p>ただし、どこでどのようにフォントを定義するかの自由のために、複数の方法を自由に組み合わせてもかまいません。</p> +<p>{{ 英語版章題("Option:_Use_CSS_.40font-face") }}</p> +<h3 id="オプション_CSS_font-face_の利用">オプション: CSS @font-face の利用</h3> +<p>リモートの (またはリモートでない) フォントの参照に @font-face を用いることができます。</p> +<pre><font id="Super_Sans"> + <!-- and so on --> +</font> + +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> + +<text font-family="Super Sans">My text uses Super Sans</text> +</pre> +<p>{{ 英語版章題("Option: reference a remote font") }}</p> +<h3 id="オプション_リモートフォントの参照">オプション: リモートフォントの参照</h3> +<p>前に述べた font-face-uri で外部のフォントを参照することができ、高い再利用性を得ることができます。</p> +<pre><font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +</pre> +<p>{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial") }}</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/SVG_Fonts"} ) }}</p> diff --git a/files/ja/web/svg/tutorial/svg_image_tag/index.html b/files/ja/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..0728abbcb1 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,41 @@ +--- +title: SVG の image 要素 +slug: Web/SVG/Tutorial/SVG_Image_Tag +tags: + - Beginner + - NeedsBeginnerUpdate + - NeedsContent + - NeedsUpdate + - SVG + - Tutorial + - チュートリアル + - 初心者 +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>SVG の {{ SVGElement("image") }} 要素は、ラスター画像を SVG オブジェクト内に描画することを可能にします。</p> + +<p>以下の基本的な例では、 {{ SVGAttr("href") }} 属性で参照されている .jpg 画像を SVG オブジェクト内に描画します。</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>いくつか注意すべき重要事項があります (<a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 仕様書</a>に基づくものです)。</p> + +<ul> + <li> + <p>x 属性や y 属性を措定しない場合、それらの値は 0 になります。</p> + </li> + <li> + <p>height 属性や width 属性を指定しない場合、それらの値は 0 になります。</p> + </li> + <li>height 属性または width 属性の値が 0 である場合、その画像を描画しません。</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..5e39b52643 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,100 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +tags: + - Intermediate + - NeedsUpdate + - SVG + - 中級者 +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<h2 id="Overview" name="Overview">概要</h2> + +<p>この記事と関連する例では、インラインの <a href="/ja/docs/SVG">SVG</a> をフォームの背景画像として使用する方法を示します。どのように <a href="/ja/docs/JavaScript">JavaScript</a> と <a href="/ja/docs/CSS">CSS</a> を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。</p> + +<h2 id="Source" name="Source">ソース</h2> + +<p>こちらに<a class="external" href="/presentations/xtech2005/svg-canvas/SVGDemo.xml" title="presentations/xtech2005/svg-canvas/SVGDemo.xml">この例</a>のソースがあります。</p> + +<pre class="brush: html"><html> +<head> +<title>XTech SVG Demo</title> +<style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } +</style> +<script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } +</script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> +<form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"> + <span id="err">Incorrect value!</span></p> + <p><input type="button" value="Activate!" onclick="signalError();"></p> + </fieldset> +</form> + +<svg + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> +</svg> +</body> +</html> +</pre> + +<h2 id="Discussion" name="Discussion">議論</h2> + +<p>ページは主に通常の HTML, CSS, JavaScript を使用しています。唯一興味深いのは、その中に含まれている <svg> 要素です。この要素とその子は SVG 名前空間にあると宣言されています。この要素にはグラデーションと、グラデーションで塗りつぶされた2つの図形が含まれています。グラデーションの色停止点の色は CSS で設定されています。ユーザーがフォームに何か間違ったものを入力すると、スクリプトは <body> に <code>invalid</code> 属性を設定し、スタイル規則はグラデーションの <code>end-stop</code> の色を赤に変更します (別のスタイル規則によりエラーメッセージが表示されます)。</p> + +<p>この方法は、以下のいくつかの点で有利です。</p> + +<ul> + <li>既存のサイトに含まれる通常の HTML フォームに対して、魅力のある対話式の背景を設定できます。</li> + <li>SVG に対応していないブラウザーに対しても後方互換性があります。単純に背景が表示されないだけです。</li> + <li>単純ながら、非常に効率的です。</li> + <li>画像のサイズは動的に気の効いた方法で必要なサイズに変更されます。</li> + <li>HTML と SVG の双方に適用するスタイルを宣言できます。</li> + <li>同一のスクリプトで HTML と SVG の双方を操作できます。</li> + <li>文書は、完全に標準準拠です。</li> +</ul> + +<div class="note"> +<p>DOM メソッドでリンクした画像を組み込まれた SVG 要素に追加するには、<code>href</code> の設定に <code>setAttributeNS</code> を使用してください。次の例のようにします:</p> + +<pre class="brush: js"> var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); +img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); + + +</pre> +</div> + +<h2 id="Details" name="Details">詳細</h2> + +<p><code>viewBox</code> 属性は、SVG 画像の座標と相対的な論理座標系を構築します。この場合、画像は 100 対 100 で貼り付けられます。</p> + +<p><code>preserveAspectRatio</code> 属性は、画像のアスペクト比を保ったまま、中心にそのままのサイズの画像を配置し、縦横ではみ出した部分を除きます。</p> + +<p><code>style</code> 属性はフォームの背景になる SVG 要素を指します。</p> + +<h2 id="Related_Links" name="Related_Links">関連リンク</h2> + +<ul> + <li>他の SVG in HTML の例: <a href="/ja/docs/SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a class="external" href="http://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml">Working example</a> は、Mozilla と Adobe の SVG Viewer がインストールされた Internet Explorer の両方で動作します。(インライン SVG を Firefox と Internet Explorer の両方で動作させるには、ブラウザごとに異なる Content-Type のドキュメントを提供する必要があります。このため、ページをキャッシュするプロクシサーバに接続している場合は、サンプルを二回目に読み込んだブラウザでは間違った Content-Type を受け取るため、動作しないことがあります。)</li> +</ul> diff --git a/files/ja/web/svg/tutorial/texts/index.html b/files/ja/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..39446db0ac --- /dev/null +++ b/files/ja/web/svg/tutorial/texts/index.html @@ -0,0 +1,77 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Texts +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> + + + +<p>SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。</p> + + + + +<h2 id="Basics" name="Basics">基礎</h2> +<p><a href="/ja/docs/Web/SVG/Tutorial/Getting_Started">導入時の例示</a>で見たとおり、<code>text</code> 要素を用いて SVG ドキュメントに任意のテキストを入れることができます。</p> +<pre class="brush:xml"><text x="10" y="10">Hello World!</text> +</pre> + +<p><code>x</code> および <code>y</code> 属性で、ビューポートのどこにテキストを表示するかを指定します。<code>text-anchor</code> 属性は start、middle、end、inherit の値を持つことができ、<code>x</code> および <code>y</code> 属性で指定した点からどちらの方向にテキストを流すかを指定できます。</p> + +<p>図形の要素と同様に、テキストも <code>fill</code> 属性による着色と、<code>stroke</code> 属性によるストロークの付加ができます。またどちらもグラデーションやパターンを参照することができ、SVG の単純な色つきテキストを CSS 2.1 に比べて非常に強力にします。</p> + + + + + + + + +<h2 id="Setting_font_properties" name="Setting_font_properties">フォントプロパティの設定</h2> +<p>テキストにおいて重要なことは、どのフォントで表示するかです。SVG はフォントを選択可能にするための属性のセットを用意しており、その多くは CSS で対応するプロパティに似ています。以下の各プロパティを、属性としてまたは CSS 宣言を通して設定できます: <code>font-family</code>, <code>font-style</code>, <code>font-weight</code>, <code>font-variant</code>, <code>font-stretch</code>, <code>font-size</code>, <code>font-size-adjust</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code> および <code>text-decoration</code></p> + + + + +<h2 id="Other_text-related_elements" name="Other_text-related_elements">他のテキスト関連要素</h2> + + + +<h3 id="tspan" name="tspan">tspan</h3> +<p>この要素は、長いテキストの一部分をマークアップするために用います。<code>text</code> 要素または他の <code>tspan</code> 要素の子要素にしなければなりません。典型的な用途は、文中の単語 1 つを赤色の太字にすることです。</p> +<pre class="brush:xml"><text> + <tspan font-weight="bold" fill="red">This is bold and red</tspan> +</text> +</pre> +<p>tspan 要素は以下のカスタム属性を持ちます:</p> +<p><strong>x</strong><br> 包含しているテキストの新たな絶対 X 座標を設定します。これはテキストのデフォルトの現在位置を上書きします。またこの属性は数値のリストを含むことができ、その値は一つずつ、tspan 要素内の各文字に適用されます。</p> +<p><strong>dx</strong><br> テキストの描画開始位置を、既定の現在位置から水平方向に移動させるオフセットの値です。こちらも各文字に適用される値のリストを持つことができ、 従って次第にオフセットは累積していきます。</p> +<p>これらと同様に、垂直方向の移動量を示す <strong>y</strong> 属性や <strong>dy</strong> 属性もあります。</p> +<p><strong>rotate</strong><br> すべての文字を指定した角度分回します。数値のリストを指定すると、それぞれの文字が指定した値の分だけ回転し、残った文字は直前の文字に指定された値に従って回転します。</p> +<p><strong>textLength</strong><br> 文字列の長さを意図的に指定する、ややわかりにくい属性です。これは、レンダリングエンジンが判断した文字列の長さとこの属性で指定した値が一致しない場合に、レンダリングエンジンにグリフの位置を微調整させられることを意味します。</p> + + + +<h4 id="tref" name="tref">tref</h4> +<p><code>tref</code> 要素ではすでに定義しているテキストを参照でき、効率的にその文字列をコピーします。内容物のテキストを引用する要素を指し示すために <code>xlink:href</code> 属性を用いることができます。また引用元とは別に、スタイルの設定や外見の変更を行うことができます。</p> +<pre class="brush:xml"><text id="example">This is an example text.</text> + +<text> + <tref xlink:href="#example" /> +</text> +</pre> + + +<h4 id="textPath" name="textPath">textPath</h4> +<p>この要素は <code>xlink:href</code> 属性を通して任意のパスを取り出し、そのパスに沿って囲むように文字を並べます。</p> + +<pre class="brush:xml"><path id="my_path" d="M 20,20 C 40,40 80,40 100,20" /> +<text> + <textPath xlink:href="#my_path">This text follows a curve.</textPath> +</text> +</pre> +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> diff --git a/files/ja/web/svg/tutorial/tools_for_svg/index.html b/files/ja/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..e6e166b8d2 --- /dev/null +++ b/files/ja/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,38 @@ +--- +title: SVG のツール +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +<p>SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。</p> +<p>{{ 英語版章題("Browser support") }}</p> +<h3 id="ブラウザのサポート">ブラウザのサポート</h3> +<p>IE9 の登場により、ようやくすべての主要なブラウザが SVG をサポートします: Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome、そして Opera です。WebKit ベースのブラウザをもつモバイルデバイス (たいてい iOS や Android) も SVG をサポートします。古いあるいはより小さなデバイスでは、SVG Tiny をサポートしているかもしれません。</p> +<h2 id="Inkscape">Inkscape</h2> +<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p> +<p>グラフィックス形式について最も重要なツールの一つが、適切な描画プログラムです。Inkscape は最先端のベクタ描画機能を提供し、またオープンソースです。</p> +<p>さらに、このソフトは SVG をネイティブフォーマットとしています。Inkscape 固有のデータを保存するときは、カスタムネームスペースによる要素や属性で SVG ファイルを拡張しますが、通常の SVG としてエクスポートすることも選択できます。</p> +<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> +<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a> (<a class="external" href="http://www.adobe.com/jp/products/illustrator.html">日本語サイト</a>)</p> +<p>Adobe は Macromedia を買収するまで、もっとも有名な SVG のプロモーターでした。このときから、Illustrator が SVG を良好にサポートし始めました。しかし、出力された SVG はしばしば癖がみられ、一般に適用するための後処理が必要になります。</p> +<h2 id="Apache_Batik">Apache Batik</h2> +<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> +<p>Batik は Apache Software Foundation 傘下の、オープンソースツールのセットです。このツールキットは Java で記述され、ほぼ完全な SVG 1.1 のサポートを提供します。また、本来は SVG 1.2 で計画されている機能のいくつかもサポートします。</p> +<p>Batik はビューア (Squiggle) や PNG 出力のラスタライザの他に、SVG ファイルを整形するためのプリティプリンタや TrueType フォントから SVG フォントへのコンバータも提供します。</p> +<p>Batik は <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a> と連携して、SVG を PDF に変換することもできます。</p> +<p>{{ 英語版章題("Other renderers") }}</p> +<h3 id="他のレンダラー">他のレンダラー</h3> +<p>SVG からラスタイメージを作成するためのプロジェクトがいくつかあります。<a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> は、もっとも有名なコマンドライン画像処理ツールのひとつです。Gnome ライブラリの <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> は、Wikipedia が SVG をラスター化するために用いています。</p> +<h2 id="Raphael_JS">Raphael JS</h2> +<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> +<p>これは、ブラウザ実装の抽象レイヤーとして働く JavaScript ライブラリです。特に古いバージョンの Internet Explorer は Vector Markup Language (VML) の生成によりサポートされています。なお VML は 2 つある SVG の前身のひとつであり、IE 5.5 から使用できます。</p> +<h2 id="Google_Docs">Google Docs</h2> +<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> +<p>Google Docs の図形描画機能は、SVG でエクスポートすることができます。</p> +<p>{{ 英語版章題("Science") }}</p> +<h2 id="科学">科学</h2> +<p>よく知られているプロッティングツールである xfig や gnuplot は、SVG でのエクスポートをサポートしています。Web でグラフを描画するための <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> は VML、SVG、および canvas をサポートし、どの技術を用いるかはブラウザの能力に応じて自動的に決定します。</p> +<p>GIS (Geographic Information System) アプリケーションで、SVG は保存および描画の形式としてよく用いられます。詳しくは <a class="external" href="http://carto.net">carto.net</a> をご覧ください。</p> +<p>{{ 英語版章題("More tools!") }}</p> +<h2 id="他のツール">他のツール</h2> +<p>W3C は、SVG をサポートする<a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">プログラムの一覧</a>を提供しています。</p> +<p>{{ languages( { "en": "en/SVG/Tutorial/Tools_for_SVG"} ) }}</p> |