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>
![]() |
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 > |
属性定義:
インターネットにおいては、リソースは 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.
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:
xpointer(id('MyView'))
。
xpointer(id('MyView'))
.片識別子には空白は許されない。したがって 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:
'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 > |
属性定義:
要素 | 属性 | 内容モデル |
---|---|---|
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)* |
Hyperlinking モジュールは Hyperlink.class 内容セットを定義する。
内容セット名 | 内容セットに含まれる要素 |
---|---|
Hyperlink.class | a |
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 |
ExternalResourcesRequired 属性モジュールは External.attrib 属性セットを定義する。
コレクション名 | コレクションに含まれる属性 |
---|---|
External.attrib | externalResourcesRequired |
要素 | 属性 | 内容モデル |
---|---|---|
view | Core.attrib, External.attrib, viewBox, preserveAspectRatio, zoomAndPan, viewTarget | (Description.class) |
次のインターフェースが以下で定義される: SVGAElement, SVGViewElement
SVGAElement インターフェースは 'a' 要素に対応する。
interface SVGAElement : SVGElement, SVGURIReference, SVGTests, SVGLangSpace, SVGExternalResourcesRequired, SVGStylable, SVGTransformable, events::EventTarget { readonly attribute SVGAnimatedString target; };
SVGViewElement インターフェースは 'view' 要素に対応する。
interface SVGViewElement : SVGElement, SVGExternalResourcesRequired, SVGFitToViewBox, SVGZoomAndPan { readonly attribute SVGStringList viewTarget; };