14 January 2003, 翻訳更新: 2010/04/29

17 リンク


目次


 

17.1 SVG 内容から外へのリンク:'a' 要素

SVG は(ハイパーリンクあるいはウェブリンクとしても知られる)リンクを指示するため、 HTML の 'a' 要素にも類似した 'a' 要素を提供する。 'a' 要素にはそれ自身を除き、親要素に含ませることが可能な任意の要素を含ませることができる。エラータ SVG においては全てのリンク定義に XLink [XLink] を用いる。

SVG provides an 'a' element, analogous to HTML's 'a' element, to indicate links (also known as hyperlinks or Web links). SVG uses XLink ([ XLink]) for all link definitions.

SVG 1.0 に対しては、UAには XLink における 単純リンク ( simple link )のみのサポートが要求されている。それぞれの単純リンクはローカルとリモートのきっかり2つのリソースを、アーク( arc )が前者から後者へ向くように結び付ける。

SVG 1.0 only requires that user agents support XLink's notion of simple links. Each simple link associates exactly two resources, one local and one remote, with an arc going from the former to the latter.

単純リンクは 'a' 要素内の描画される要素ごとに個別に定められる。例えば 'a' 要素が複数の 'circle' 要素を含むならば、各 circle ごとにリンクが作成される。 'a' 要素内の描画される各要素はローカルリソース(リンク元のアンカー)になる。

A simple link is defined for each separate rendered element contained within the 'a' element; thus, if the 'a' element contains three 'circle' elements, a link is created for each circle. For each rendered element within an 'a' element, the given rendered element is the local resource (the source anchor for the link).

リモートリソース(リンク先)は 'a' 要素の XLink href 属性で指定される URI により定められる。リモートリソースは任意のウェブリソース(例えば画像, ビデオクリップ, 音声, プログラム, 別の SVG 文書, HTML 文書, 現在の文書内の要素, 異なる文書内の要素, 等々)が可能である。これらリンクの活性化により(マウスクリック, キーボード入力, ボイスコマンド, 等々)、利用者はリンク先のリソースを訪れることができる。

The remote resource (the destination for the link) is defined by a URI specified by the XLink href attribute on the 'a' element. The remote resource may be any Web resource (e.g., an image, a video clip, a sound bite, a program, another SVG document, an HTML document, an element within the current document, an element within a different document, etc.). By activating these links (by clicking with the mouse, through keyboard input, voice commands, etc.), users may visit these resources.

Example link01 では楕円にリンクをあてがっている。

Example link01 assigns a link to an ellipse.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example link01 - 楕円形の上のリンク
  </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03"/>
  <a xlink:href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>
</svg>
Example link01
Example link01 - a link on an ellipse

この例を SVG で見る( SVG 対応ブラウザのみ)
 

SVG と HTML をサポートするUAにより上の SVG ファイルが表示された場合、楕円のクリックにより現在のウインドウあるいはフレームが W3C のホームページに置き換えられる。
 

If the above SVG file is viewed by a user agent that supports both SVG and HTML, then clicking on the ellipse will cause the current window or frame to be replaced by the W3C home page.
 

<!ENTITY % SVG.a.extra.content "" >
<!ENTITY % SVG.a.element "INCLUDE" >
<![%SVG.a.element;[
<!ENTITY % SVG.a.content
    "( #PCDATA | %SVG.Description.class; | %SVG.Animation.class;
       %SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class;
       %SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
       %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
       %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
       %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
       %SVG.Font.class; %SVG.Extensibility.class; %SVG.a.extra.content; )*"
>
<!ELEMENT %SVG.a.qname; %SVG.a.content; >
<!-- end of SVG.a.element -->]]>
<!ENTITY % SVG.a.attlist "INCLUDE" >
<![%SVG.a.attlist;[
<!ATTLIST %SVG.a.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Presentation.attrib;
    %SVG.GraphicalEvents.attrib;
    %SVG.XLinkReplace.attrib;
    %SVG.External.attrib;
    transform %TransformList.datatype; #IMPLIED
    target %LinkTarget.datatype; #IMPLIED
>

属性定義:

xmlns [:prefix] = "resource-name"
XML 名前空間を識別する標準 XML 属性。この属性は現在の要素で利用可能な XLink [XLink] 名前空間を作成する。「 XML 名前空間( Namespaces in XML )」勧告 [XML-NS] 参照のこと。
アニメーション:不可
Standard XML attribute for identifying an XML namespace. This attribute makes the XLink [ XLink] namespace available to the current element. Refer to the "Namespaces in XML" Recommendation [ XML-NS].
Animatable: no.
xlink:type = 'simple'
xlink:type 属性についての記述を見よ。)
(See generic description of xlink:type attribute.)
xlink:role = '<uri>'
xlink:role 属性についての記述を見よ。)
(See generic description of xlink:role attribute.)
xlink:arcrole = '<uri>'
xlink:arcrole 属性についての記述を見よ。)
(See generic description of xlink:arcrole attribute.)
xlink:title = '<string>'
xlink:title 属性についての記述を見よ。)
(See generic description of xlink:title attribute.)
xlink:show = 'new | replace'
リンクの活性化に伴って終点リソースまで辿る際に、新しいウインドウ, フレーム, ペイン, その他の関係する表示文脈に読み込ませるべきか、あるいは始点リソースが読み込まれていたそれと同じ場所に読み込ませるべきかを指示する。"XML Linking Language (XLink)" [XLink] ( XML リンク付け言語)を参照のこと。
アニメーション:不可
Indicates whether, upon activation of the link, traversing to the ending resource should load it in a new window, frame, pane, or other relevant presentation context or load it in the same window, frame, pane, or other relevant presentation context in which the starting resource was loaded. Refer to the "XML Linking Language (XLink)" [ XLink].
Animatable: no.
xlink:actuate = 'onRequest'
アプリケーションは追跡( traversal )の目的を持つ読み込み終了イベント( post-loading event )が発火されたときにのみ、始点リソースから終点リソースへの追跡をすべきである旨を指示する。 "XML Linking Language (XLink)" [XLink] を参照のこと。
アニメーション:不可
An application should traverse from the starting resource to the ending resource only on a post-loading event triggered for the purpose of traversal. Refer to the "XML Linking Language (XLink)" [ XLink].
Animatable: no.
xlink:href = "<uri>"
参照先のオブジェクトの場所を URI 参照 として記述したもの。 "XML Linking Language (XLink)" [XLink] 参照のこと。
アニメーション:可
The location of the referenced object, expressed as a URI reference. Refer to the "XML Linking Language (XLink)" [ XLink].
Animatable: yes.
target = "<frame-target>"
この属性は、親の文書が複数フレームの HTML または XHTML 文書であるときのように、終点リソースの(表示に利用される)対象に複数のものが可能であるときに適用される。この属性はリンクが活性化されたときに文書が読み込まれる対象(例えば HTML / XHTML のフレーム)の名前を指定する。読み込まれる対象についてのより詳細な情報については HTML / XHTML 仕様の該当部分を参照のこと。
アニメーション:可
This attribute has applicability when there are multiple possible targets for the ending resource, such as when the parent document is a multi-frame HTML or XHTML document. This attribute specifies the name of the target location (e.g., an HTML or XHTML frame) into which a document is to be opened when the link is activated. For more information on targets, refer to the appropriate HTML or XHTML specifications.
Animatable: yes.
他で定義されている属性:
%stdAttrs; %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired style, %PresentationAttributes-All;.
%stdAttrs; %langSpaceAttrs;, class, transform, %graphicsElementEvents;, %testAttrs;, externalResourcesRequired style, %PresentationAttributes-All;.

17.2 SVG 内容の中へのリンク: URI 片と SVG ビュー

17.2.1 概要: URI 文書片と SVG ビュー

インターネットにおいては、リソースは URI ( Uniform Resource Identifiers - 統一リソース識別子) [URI] により特定される。例えば、 http://example.com にある SVG ファイル MyDrawing.svg は次の URI を持つ:

On the Internet, resources are identified using URIs (Uniform Resource Identifiers) [ URI]. For example, an SVG file called MyDrawing.svg located at http://example.com might have the following URI:

http://example.com/MyDrawing.svg

URI は URI 片識別子 ( URI fragment identifier )をその一部に含ませることで XML 文書内の特定の要素を指すようにすることもできる。 URI 片識別子を含む URI は省略可能な 基底 URI ( base URI )に "#" 文字そして URI 片識別子が続く。例えば、次の URI はファイル MyDrawing.svg 内の ID が "Lamppost" の要素を指す:

A URI can also address a particular element within an XML document by including a URI fragment identifier as part of the URI. A URI which includes a URI fragment identifier consists of an optional base URI, followed by a "#" character, followed by the URI fragment identifier. For example, the following URI can be used to specify the element whose ID is "Lamppost" within file MyDrawing.svg:

http://example.com/MyDrawing.svg#Lamppost

SVG 内容は通常何らかの絵や図面を表現するので、 SVG ビュー と呼ばれる文書の特定の部分を大写しに表示させるための初期変換を指示するリンクが一般的な要求として存在する。

Because SVG content often represents a picture or drawing of something, a common need is to link into a particular view of the document, where a view indicates the initial transformations so as to present a closeup of a particular section of the document.

17.2.2 SVG 片識別子

エラータ : XPointer 関連はこの仕様から取り除かれることになったので、この節の XPointer 関連の記述(削除部分としてマークアップされている箇所)は削除。)

SVG 文書の特定の SVG ビューへリンクさせるには、 URI 片識別子は正しい SVG 片識別子 の形式となっている必要がある。 SVG 片識別子は、 MIME メディアタイプ "image/svg+xml" のリソースを指す、 URI の「セレクタ( selector )」または「片識別子( fragment identifier )」の持つ意味を定義する。

To link into a particular view of an SVG document, the URI fragment identifier needs to be a correctly formed SVG fragment identifier. An SVG fragment identifier defines the meaning of the "selector" or "fragment identifier" portion of URIs that locate resources of MIME media type "image/svg+xml".

SVG 片識別子には3通りの形式がある:

An SVG fragment identifier can come in three forms:

SVG 片識別子の構文は次で与えられる:

An SVG fragment identifier is defined as follows:

SVGFragmentIdentifier ::= BareName |
                          XPointerIDRef |
                          SVGViewSpec
                
BareName ::= XML_Name
SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
SVGViewAttributes ::= SVGViewAttribute |
                      SVGViewAttribute ';' SVGViewAttributes
                      
SVGViewAttribute ::= viewBoxSpec |
                     preserveAspectRatioSpec |
                     transformSpec |
                     zoomAndPanSpec |
                     viewTargetSpec
viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
transformSpec ::= 'transform(' TransformParams ')'
zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'
viewTargetSpec ::= 'viewTarget(' ViewTargetParams ')'

ここで:

where:

片識別子には空白は許されない。したがって SVG ビュー指定における数値はコンマで区切り(例えば #svgView(viewBox(0,0,200,200)) )、属性はセミコロンで区切ることになる(例えば #svgView(viewBox(0,0,200,200);preserveAspectRatio(none)) )。

Spaces are not allowed in fragment specifications; thus, commas are used to separate numeric values within an SVG view specification (e.g., #svgView(viewBox(0,0,200,200))) and semicolons are used to separate attributes (e.g., #svgView(viewBox(0,0,200,200);preserveAspectRatio(none))).

リンク元の文書が HTML [HTML4] のアンカー要素(即ち HTML における <a href=...> )または XLink 仕様 [XLINK] による SVG 文書へのリンクを活性化する場合、 SVG 片識別子は次の様にして SVG 文書に対する初期ビューを指定する:

When a source document performs a link into an SVG document via an HTML [ HTML4] anchor element (i.e., <a href=...> element in HTML) or an XLink specification [ XLINK], then the SVG fragment identifier specifies the initial view into the SVG document, as follows:

17.2.3 定義済みビュー:'view' 要素

'view' 要素は次の様に定義される:

The 'view' element is defined as follows:

<!ENTITY % SVG.view.extra.content "" >
<!ENTITY % SVG.view.element "INCLUDE" >
<![%SVG.view.element;[
<!ENTITY % SVG.view.content
    "( %SVG.Description.class; %SVG.view.extra.content; )*"
>
<!ELEMENT %SVG.view.qname; %SVG.view.content; >
<!-- end of SVG.view.element -->]]>
<!ENTITY % SVG.view.attlist "INCLUDE" >
<![%SVG.view.attlist;[
<!ATTLIST %SVG.view.qname;
    %SVG.Core.attrib;
    %SVG.External.attrib;
    viewBox %ViewBoxSpec.datatype; #IMPLIED
    preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
    zoomAndPan ( disable | magnify ) 'magnify'
    viewTarget CDATA #IMPLIED
>

属性定義:

viewTarget = "XML_Name [XML_NAME]*"
SVG ビューに結び付けられる対象のオブジェクトを指示する。与えられた場合は対象となる要素(たち)が強調される。
アニメーション:不可
Indicates the target object associated with the view. If provided, then the target element(s) will be highlighted.
Animatable: no.

他で定義されている属性:
%stdAttrs;, viewBox, preserveAspectRatio, zoomAndPan, externalResourcesRequired


17.3 Hyperlinking モジュール

要素 属性 内容モデル
a Core.attrib, Conditional.attrib, Style.attrib, transform, target, GraphicalEvents.attrib, Presentation.attrib, External.attrib, XLinkReplace.attrib (#PCDATA | Structure.class | Description.class Shape.class | Image.class | | View.class | Conditional.class | HyperinkingElements | Font.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Animation.class | ColorProfile.class)*


17.3.1 Hyperlinking 内容セット

Hyperlinking モジュールは Hyperlink.class 内容セットを定義する。

内容セット名 内容セットに含まれる要素
Hyperlink.class a

17.4 XLink 属性モジュール

XLink 属性モジュールは XLink.attrib, XLinkRequired.attrib, XLinkEmbed.attrib, XLinkReplace.attrib 属性セットを定義する。

コレクション名 コレクションに含まれる属性
XLink.attrib xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkRequired.attrib xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkEmbed.attrib xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate
XLinkReplace.attrib xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate


17.5 ExternalResourcesRequired 属性モジュール

ExternalResourcesRequired 属性モジュールは External.attrib 属性セットを定義する。

コレクション名 コレクションに含まれる属性
External.attrib externalResourcesRequired

17.6 View モジュール

要素 属性 内容モデル
view Core.attrib, External.attrib, viewBox, preserveAspectRatio, zoomAndPan, viewTarget (Description.class)

17.6.1 View 内容セット

View モジュールは View.class 内容セットを定義する。

内容セット名 内容セットに含まれる要素
View.class view

17.7 DOM インターフェース

次のインターフェースが以下で定義される: SVGAElement, SVGViewElement


インターフェース SVGAElement

SVGAElement インターフェースは 'a' 要素に対応する。


IDL 定義
interface SVGAElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 
  readonly attribute SVGAnimatedString target;
};

属性
readonly SVGAnimatedString target
'a' 要素の target 属性に対応する。

インターフェース SVGViewElement

SVGViewElement インターフェースは 'view' 要素に対応する。


IDL 定義
interface SVGViewElement : 
                SVGElement,
                SVGExternalResourcesRequired,
                SVGFitToViewBox,
                SVGZoomAndPan { 
  readonly attribute SVGStringList viewTarget;
};

属性
readonly SVGStringList viewTarget
'view' 要素の viewTarget 属性に対応する。 viewTarget 属性に与えられた名前からなる DOMString 値のリスト。各 DOMString 値は getElementById() メソッド呼出しを用いて対応する要素に結び付けることができる。