From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/element/a/index.html | 150 ++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/ja/web/svg/element/a/index.html (limited to 'files/ja/web/svg/element/a') 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: +slug: Web/SVG/Element/a +tags: + - Element + - Reference + - SVG + - SVG Container + - SVG コンテナー + - 要素 +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

<a> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の {{htmlelement("a")}} 要素ととても良く似ています。

+ +

SVG の <a> 要素はコンテナーですので、 (HTML のような) テキストを囲むものだけでなく、図形を囲むリンクを生成することもできます。

+ +
+ + +
<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>
+ +
/* 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;
+}
+ +

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

+
+ +
+

この要素は HTML の <a> 要素と同じタグ名なので、 a を CSS や {{domxref("Document.querySelector", "querySelector")}} で選択すると、誤った種類の要素に適用してしまう可能性があります。 @namespace 規則で二つを区別してみてください。

+
+ +

属性

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
移動するのではなく {{Glossary("URL")}} をダウンロードするようブラウザーに指示しますので、ユーザーにローカルファイルとして保存するよう促します。
+ 値種別: <string> ; 既定値: none; アニメーション: no
+
{{SVGAttr("href")}}
+
ハイパーリンクが指す先の {{Glossary("URL")}} または URL フラグメントです。
+ 値種別: <URL> ; 既定値: none; アニメーション: yes
+
{{htmlattrxref("hreflang", "a")}}
+
ハイパーリンクが指す先の URL または URL フラグメントにおける人間の言語です。
+ 値種別: <string> ; 既定値: none; アニメーション: yes
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
空白区切りの URL のリストで、ハイパーリンクをたどるとき、 {{HTTPMethod("POST")}} リクエストで本文が PING であるものがブラウザーから (バックグラウンドで) 送信されます。通常はトラッキングのために使用されます。同じ用途でもっと広く対応されている機能として、 {{domxref("Navigator.sendBeacon()")}} を参照してください。
+ 値種別: <list-of-URLs> ; 既定値: none; アニメーション: no
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
どのリファラーをアクセス先の {{Glossary("URL")}} に送信するかです。
+ 値種別: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; 既定値: none; アニメーション: no
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
対象のオブジェクトとリンクしているオブジェクトの関係です。
+ 値種別: <list-of-Link-Types> ; 既定値: none; アニメーション: yes
+
{{SVGAttr("target")}}
+
リンクされた {{Glossary("URL")}} の表示先です。
+ 値種別: _self|_parent|_top|_blank|<name> ; 既定値: _self; アニメーション: yes
+
{{htmlattrxref("type", "a")}}
+
リンク先の URL の {{Glossary("MIME type", "MIME タイプ")}}です。
+ 値種別: <string> ; 既定値: none; アニメーション: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
ハイパーリンクがさす先の URL または URL フラグメントです。古いブラウザー向けの後方互換性のために必要な場合があります。
+ 値種別: <URL> ; 既定値: none; アニメーション: yes
+
+ +

グローバル属性

+ +
+
コア属性
+
主なもの: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
スタイル属性
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
条件付き処理属性
+
主なもの: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
イベント属性
+
グローバルイベント属性, 文書要素イベント属性, グラフィックイベント属性
+
プレゼンテーション属性
+
主なもの: {{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')}}
+
XLink 属性
+
主なもの: {{SVGAttr("xlink:title")}}
+
ARIA 属性
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

使用上の注意

+ +

{{svginfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}{{SVGAttr("xlink:href")}} 属性を {{SVGAttr("href")}} で置き換え
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.elements.a")}}

-- cgit v1.2.3-54-g00ecf