SVG provides an 'a' element, analogous to HTML's 'a' element, to indicate hyperlinks; those parts of the drawing which when clicked on will cause the current browser frame to be replaced by the contents of the URL specified in the href attribute.
Example link01 assigns a hyperlink to an ellipse.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="5cm" height="3cm">
<desc>Example link01 - a hyperlink on an ellipse
</desc>
<rect x=".01cm" y=".01cm" width="4.98cm" height="2.98cm"
style="fill:none; stroke:blue"/>
<a xlink:href="http://www.w3.org">
<ellipse cx="2.5cm" cy="1.5cm" rx="2cm" ry="1cm"
style="fill:red"/>
</a>
</svg>
|
View this example as SVG (SVG-enabled browsers only)
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 % aExt "" > <!ELEMENT a (#PCDATA|desc|title|metadata|defs| path|rect|circle|ellipse|line|polyline|polygon| text|tspan|tref|textPath|altGlyph| use|image|svg|g|view|switch|a|altGlyphDef| script|style|symbol|marker|clipPath|mask| linearGradient|radialGradient|pattern|filter|cursor|font| animate|set|animateMotion|animateColor|animateTransform| color-profile|font-face %ceExt;%aExt;)* > <!ATTLIST a %stdAttrs; xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink" xlink:type (simple|extended|locator|arc) #FIXED "simple" xlink:role CDATA #IMPLIED xlink:arcrole CDATA #IMPLIED xlink:title CDATA #IMPLIED xlink:show (new|replace) 'replace' xlink:actuate (onRequest|onLoad) #FIXED 'onRequest' xlink:href %URI; #REQUIRED %testAttrs; %langSpaceAttrs; externalResourcesRequired %Boolean; #IMPLIED class %ClassList; #IMPLIED style %StyleSheet; #IMPLIED %PresentationAttributes-All; transform %TransformList; #IMPLIED %graphicsElementEvents; target %LinkTarget; #IMPLIED > |
Attribute definitions:
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
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
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.
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".
An SVG fragment identifier can come in three forms:
An SVG fragment identifier is defined as follows:
SVGFragmentIdentifier ::= BareName |
XPointerIDRef |
SVGViewSpec
BareName ::= XML_Name
XPointerIDRef ::= 'xpointer(id(' XML_Name '))'
SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
SVGViewAttributes ::= SVGViewAttribute |
SVGViewAttribute ';' SVGViewAttributes
SVGViewAttribute ::= viewBoxSpec |
preserveAspectRatioSpec |
transformSpec |
enableZoomAndPanControlsSpec |
viewTargetSpec
viewBoxSpec ::= 'viewBox(' X ',' Y ',' Width ',' Height ')'
X ::= Number
Y ::= Number
Width ::= Number
Height ::= Number
preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
AspectParams ::= AspectValue |
AspectValue ',' MeetOrSlice
AspectValue ::= 'none' | 'xMinYMin' | 'xMinYMid' | 'xMinYMax' |
'xMidYMin' | 'xMidYMid' | 'xMidYMax' |
'xMaxYMin' | 'xMaxYMid' | 'xMaxYMax'
MeetOrSlice ::= 'meet' | 'slice'
Height ::= Number
transformSpec ::= 'transform(' TransformParams ')'
transformSpec ::= 'zoomAndPan(' TrueOrFalse ')'
TrueOrFalse ::= 'true' | 'false'
viewTargetSpec ::= 'viewTarget(' XML_Name ')'
where:
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))).
When a source document performs a hyperlink 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:
The 'view' element is defined as follows:
<!ENTITY % viewExt "" > <!ELEMENT view (%descTitleMetadata;%viewExt;) > <!ATTLIST view %stdAttrs; externalResourcesRequired %Boolean; #IMPLIED viewBox %ViewBoxSpec; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet' zoomAndPan (disable | magnify | zoom) 'magnify' viewTarget CDATA #IMPLIED > |
Attribute definitions:
The following interfaces are defined below: SVGAElement, SVGViewElement.
The SVGAElement interface corresponds to the 'a' element.
interface SVGAElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {
readonly attribute SVGAnimatedString target;
};
The SVGViewElement interface corresponds to the 'view' element.
interface SVGViewElement :
SVGElement,
SVGExternalResourcesRequired,
SVGFitToViewBox,
SVGZoomAndPan {
readonly attribute SVGElement viewTarget;
};