17 リンク

目次

• 17.1 SVG内容から外へのリンク：'a' 要素
• 17.2 SVG内容の中へのリンク：URI片とSVGビュー
  • 17.2.1 概要：URI片とSVGビュー
  • 17.2.2 SVG片識別子
  • 17.2.3 定義済みのビュー：'view' 要素
• 17.3 Hyperlinking モジュール
• 17.4 Xlink 属性モジュール
• 17.5 ExternalResourcesRequired 属性モジュール
• 17.6 View モジュール
• 17.7 DOMインターフェース

• 17.1 Links out of SVG content: the 'a' element
• 17.2 Linking into SVG content: URI fragments and SVG views
  • 17.2.1 Introduction: URI fragments and SVG views
  • 17.2.2 SVG fragment identifiers
  • 17.2.3 Predefined views: the 'view' element
• 17.3 Hyperlinking Module
• 17.4 Xlink Attribute Module
• 17.5 ExternalResourcesRequired Attribute Module
• 17.6 View Module
• 17.7 DOM interfaces

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 に対しXLinkにおける 単純リンク （simple link）のみをサポートすれば良い。それぞれの単純リンクはローカルとリモートのきっちり２つのリソースを、アーク（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 により定められる。リモートリソースは任意のウェブリソース（例えば画像, ビデオクリップ, サウンドバイト（sound bite）, プログラム, 別の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

この例をSVGで見る（SVG対応ブラウザのみ）
 

SVGとHTMLをサポートするＵＡにより上の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.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
>

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片識別子には３通りの形式がある：

An SVG fragment identifier can come in three forms:

• 略記式の無装飾名（bare name）形式（例えば MyDrawing.svg#MyView ）による場所の指定。この形式のアドレス指定はSVG要素のIDによる参照であり、HTMLの旧版 および "XML Pointer Language (XPointer)" [XPTR] で定式化されている略記式の無装飾名による文書片のアドレス指定と互換性がある。 （無装飾名形式によるアドレス指定 #MyView は XPointer formulation による #xpointer(id('MyView')) と同値である。）
• Shorthand bare name form of addressing (e.g., MyDrawing.svg#MyView). This form of addressing, which allows addressing an SVG element by its ID, is compatible with the fragment addressing mechanism for older versions of HTML and the shorthand bare name formulation in "XML Pointer Language (XPointer)" [ XPTR]. (The bare name form of addressing #MyView is equivalent to the XPointer formulation #xpointer(id('MyView')).)
• XPointerと互換な ID 参照（例えば MyDrawing.svg#xpointer(id('MyView')) ）。この形式のアドレス指定ではSVG要素の ID も可能であり、 "XML Pointer Language (XPointer)" [XPTR] の構文および XPath syntax for referencing IDs と互換である。
• XPointer-compatible ID reference (e.g., MyDrawing.svg#xpointer(id('MyView'))). This form of addressing, which also allows addressing an SVG element by its ID, is compatible with "XML Pointer Language (XPointer)" [ XPTR] syntax and the XPath syntax for referencing IDs.
• SVGビュー指定 （SVG view specification）（例えば MyDrawing.svg#svgView(viewBox(0,200,1000,1000)) ）。この形式によるアドレス指定は文書の望ましい表示（例えば初期状態において表示される文書の範囲やその拡大倍率）をSVG片識別子の中で完全な形で指定する。SVGビュー指定の中身は５つのパラメタ：viewBox(...), preserveAspectRatio(...), transform(...), zoomAndPan(...), viewTarget(...) で構成され、transform については 'g' 要素の対応する属性と同じ意味を持ち、他はそれぞれ 'view' 要素における対応する属性と同じ意味を持つ。
• SVG view specification (e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))). This form of addressing specifies the desired view of the document (e.g., the region of the document to view, the initial zoom level) completely within the SVG fragment specification. The contents of the SVG view specification are the five parameter specifications, viewBox(...), preserveAspectRatio(...), transform(...), zoomAndPan(...) and viewTarget(...), whose parameters have the same meaning as the corresponding attributes on a 'view' element, or, in the case of transform(...), the same meaning as the corresponding attribute has on a 'g' element).

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:

• XPointerIDRef はXPointerにおけるID参照の規則に従う（ [XPTR] と XPath syntax for referencing IDsを参照）。例えば、xpointer(id('MyView'))。
• XPointerIDRef conforms to the rules for referencing IDs in XPointer (see [ XPTR] and XPath syntax for referencing IDs). For example, xpointer(id('MyView')).
• ViewBoxParams は 'view' 要素の viewBox 属性に対応するパラメタである。例えば、 viewBox(0,0,200,200) 。
• ViewBoxParams corresponds to the parameter values for the viewBox attribute on the 'view' element. For example, viewBox(0,0,200,200).
• AspectParams は 'view' 要素の preserveAspectRatio 属性に対応するパラメタである。例えば、 preserveAspectRatio(xMidYMid) 。
• AspectParams corresponds to the parameter values for the preserveAspectRatio attribute on the 'view' element. For example, preserveAspectRatio(xMidYMid).
• TransformParams は多くの要素で利用可能な transform属性に対応するパラメタである。例えば、 transform(scale(5)) 。
• TransformParams corresponds to the parameter values for the transform attribute that is available on many elements. For example, transform(scale(5)).
• ZoomAndPanParams は 'view' 要素の zoomAndPan 属性に対応するパラメタである。例えば、 zoomAndPan(magnify) 。
• ZoomAndPanParams corresponds to the parameter values for the zoomAndPan attribute on the 'view' element. For example, zoomAndPan(magnify).
• ViewTargetParams は 'view' 要素の viewTarget 属性に対応するパラメタである。例えば、 viewTarget(MyElementID) 。
• ViewTargetParams corresponds to the parameter values for the viewTarget attribute on the 'view' element. For example, viewTarget(MyElementID).

片識別子には空白は許されない。したがって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:

• SVG片識別子が与えられていない場合（例えば MyDrawing.svg のように指定されたURLが "#" 文字を含まないとき）、SVG文書に対する初期ビューは 最も外側のsvg要素 のビュー指定属性（即ち viewBox 等々）を用いて確立される。
• If no SVG fragment identifier is provided (e.g, the specified URI did not contain a "#" character, such as MyDrawing.svg), then the initial view into the SVG document is established using the view specification attributes (i.e., viewBox, etc.) on the outermost 'svg' element.
• SVG片識別子がSVG文書内の 'view' 要素を指す場合（例えば MyDrawing.svg#MyView や MyDrawing.svg#xpointer(id('MyView')) ）、最も近い祖先の 'svg' 要素がビューポートに表示される。 'view' 要素に含まれるビュー指定属性は、最も近い祖先の 'svg' 要素の対応するビュー指定属性を上書きする。
• If the SVG fragment identifier addresses a 'view' element within an SVG document (e.g., MyDrawing.svg#MyView or MyDrawing.svg#xpointer(id('MyView'))) then the closest ancestor 'svg' element is displayed in the viewport. Any view specification attributes included on the given 'view' element override the corresponding view specification attributes on the closest ancestor 'svg' element.
• SVG片識別子が特定のSVGビュー（例えば MyDrawing.svg#svgView(viewBox(0,200,1000,1000)) ）を指す場合、最も近い祖先の 'svg' 要素で定義される文書片がSVG片識別子で与えられたSVGビュー指定を用いてビューポートに表示される。
• If the SVG fragment identifier addresses specific SVG view (e.g., MyDrawing.svg#svgView(viewBox(0,200,1000,1000))), then the document fragment defined by the closest ancestor 'svg' element is displayed in the viewport using the SVG view specification provided by the SVG fragment identifier.
• SVG片識別子が 'view' 要素以外の要素を指す場合、最も近い祖先の 'svg' 要素で定義される文書片が、その 'svg' 要素のビュー指定属性を用いて表示される。
• If the SVG fragment identifier addresses any element other than a 'view' element, then the document defined by the closest ancestor 'svg' element is displayed in the viewport using the view specification attributes on that 'svg' element.

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
>

17.3 Hyperlinking モジュール

17.6 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() メソッド呼出しを用いて対応する要素に結び付けることができる。