diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/svg/element | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/svg/element')
36 files changed, 3970 insertions, 0 deletions
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> |