14 Extended links

SVG 1.0 and 1.1 use XLink simple links; a link anchor can only link to a single link target. It is often desirable to have a link anchor point to multiple targets. XLink extended links are the clear design choice to add an extended link capability. Extended links contain multiple locators. In SVG 1.2, activating an extended link causes a menu to be displayed; the text of each menu item is taken from the title on each locator.

  <define name='xa'>
    <element name='xa'>
      <ref name='attlist.xa'/>
      <ref name='SVG.xa.content'/>
    </element>
  </define>

  <define name='attlist.xa' combine='interleave'>
    <ref name='SVG.Core.attrib'/>
    <ref name='SVG.Conditional.attrib'/>
    <ref name='SVG.Style.attrib'/>
    <ref name='SVG.Presentation.attrib'/>
    <ref name='SVG.GraphicalEvents.attrib'/>
    <ref name='SVG.External.attrib'/>
    <ref name='SVG.transform.attrib'/>
    <ref name='SVG.transform-host.attrib'/>
    <optional>
      <attribute name='target'>
        <ref name='LinkTarget.datatype'/>
      </attribute>
    </optional>
  </define>

  <define name='SVG.xa.content'>
    <zeroOrMore>
      <ref name='SVG.Description.class'/>
    </zeroOrMore>
    <zeroOrMore>
      <ref name='loc'/>
    </zeroOrMore>
    <zeroOrMore>
      <choice>
        <ref name='SVG.Animation.class'/>
        <ref name='SVG.Structure.class'/>
        <ref name='SVG.Conditional.class'/>
        <ref name='SVG.Image.class'/>
        <ref name='SVG.Style.class'/>
        <ref name='SVG.Shape.class'/>
        <ref name='SVG.Text.class'/>
        <ref name='SVG.Marker.class'/>
        <ref name='SVG.Profile.class'/>
        <ref name='SVG.Gradient.class'/>
        <ref name='SVG.Pattern.class'/>
        <ref name='SVG.Clip.class'/>
        <ref name='SVG.Mask.class'/>
        <ref name='SVG.Filter.class'/>
        <ref name='SVG.Cursor.class'/>
        <ref name='SVG.Hyperlink.class'/>
        <ref name='SVG.View.class'/>
        <ref name='SVG.Script.class'/>
        <ref name='SVG.Font.class'/>
      </choice>
    </zeroOrMore>
  </define>

The extended-link equivalent to the a element is called xa and the locator elements are called loc. Here is a simple example using xlink:title attributes.

<xa>
  <loc xlink:href="http://example.com/A.svg" 
    xlink:title="Schematic diagram"/>
  <loc xlink:href="http://example.org/B.svg"
    xlink:title="Parts list"/>
  <!-- content of the link goes here -->
  <path d="M50,50L100,20L30,100z"/>
</xa>

The content model of xa is one or more loc elements, followed by the same content that an a element can have. For improved internationalization, title children are allowed as children of the loc element as well as xlink:title attributes on the loc element itself. In addition, a switch element may be used to give multilingual titles. Here is the same example, but using title elements.

<xa>
  <loc xlink:href="http://example.com/A.svg">
    <title>Schematic diagram</title>
  </loc>
  <loc xlink:href="http://example.org/B.svg">
    <title>Parts list</title>
  </loc>
  <!-- content of the link goes here -->
  <path d="M50,50L100,20L30,100z"/>
</xa>

The behavior of an extended link depends on the number of loc children whose display property has a value other than 'none':

0

No action, link is disabled

1

The link is traversed to the single location

2 or more

A menu is constructed for each displayed loc element,using the text from the title element s. The size of the menu is such that the longest string is not clipped. Once one of the menu items is chosen,the menu disappears, and the selected locator is traversed.

Here is an example with multilingual menu items - Japanese, Russian, French, and an English fallback

<xa>
  <loc xlink:href="http://example.com/A.svg">
    <switch>
      <title systemLanguage="jp">図面</title>
      <title systemLanguage="ru">Диаграмма</title>
      <title systemLanguage="fr">Diagramme schématise</title>
      <title>Schematic diagram</title>
    </switch>  
  </loc>
  <loc xlink:href="http://example.org/B.svg">
    <switch>
      <title systemLanguage="jp">部品一覧</title>
      <title systemLanguage="ru">Список частей</title>
      <title systemLanguage="fr">Liste des pièces</title>
      <title>Parts list</title>
    </switch>  
  </loc>
  <!-- content of the link goes here -->
  <path d="M50,50L100,20L30,100z"/>
</xa>