mozilla

Revision 330423 of a

  • Revision slug: SVG/Element/a
  • Revision title: a
  • Revision id: 330423
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

{{ SVGRefElem() }}

The SVG Anchor Element (<a>) defines a hyperlink

Usage context

Categories Container element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Shape elements »
Structural elements »
Gradient elements »
{{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}
Normative document SVG 1.1 (2nd Edition)

Example

<svg width="120" height="120" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="https://developer.mozilla.org/en/SVG">
    <text x="60" y="60" 
          text-anchor="middle" 
          text-decoration="underline" 
          fill="blue">SVG on MDN</text>
  </a>

</svg>

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("xlink:show") }}
  • {{ SVGAttr("xlink:actuate") }}
  • {{ SVGAttr("xlink:href") }}
  • {{ SVGAttr("target") }}

DOM Interface

This element implements the SVGAElement interface.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop('1.8') }} {{ CompatIE('9.0') }} {{ CompatOpera('9.0') }} {{ CompatSafari('3.0.4') }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatAndroid('3.0') }} {{ CompatGeckoMobile('1.8') }} {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ CompatSafari('3.0.4') }}

The chart is based on these sources.

{{ note("No browser supports the full XLink set.") }}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>The SVG Anchor Element (&lt;a&gt;) defines a hyperlink</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Container element</td>
    </tr>
    <tr>
      <th scope="row">Permitted content</th>
      <td>Any number of the following elements, in any order:<br />
        <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a>&nbsp;»<br />
        <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a>&nbsp;»<br />
        <a href="/en/SVG/Element#Shape" title="en/SVG/Attribute#Shape">Shape elements</a>&nbsp;»<br />
        <a href="/en/SVG/Element#Structural" title="en/SVG/Attribute#Structural">Structural elements</a>&nbsp;»<br />
        <a href="/en/SVG/Element#Gradient" title="en/SVG/Attribute#Gradient">Gradient elements</a>&nbsp;»<br />
        {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG/linking.html#Links" title="http://www.w3.org/TR/SVG/linking.html#Links">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<pre class="brush: xml">
&lt;svg width="<a>120</a>" height="<a>120</a>" 
     xmlns="<a>http://www.w3.org/2000/svg</a>" 
     xmlns:xlink="<a>http://www.w3.org/1999/xlink</a>"&gt;

  &lt;a xlink:href="https://developer.mozilla.org/en/SVG"&gt;
    &lt;text x="<a>60</a>" y="<a>60</a>" 
          text-anchor="<a>middle</a>" 
          text-decoration="<a>underline</a>" 
          fill="<a>blue</a>"&gt;SVG on MDN&lt;/text&gt;
  &lt;/a&gt;

&lt;/svg&gt;</pre>
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
  <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a>&nbsp;»</li>
  <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink attributes</a>&nbsp;»</li>
  <li>{{ SVGAttr("class") }}</li>
  <li>{{ SVGAttr("style") }}</li>
  <li>{{ SVGAttr("externalResourcesRequired") }}</li>
  <li>{{ SVGAttr("transform") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
  <li>{{ SVGAttr("xlink:show") }}</li>
  <li>{{ SVGAttr("xlink:actuate") }}</li>
  <li>{{ SVGAttr("xlink:href") }}</li>
  <li>{{ SVGAttr("target") }}</li>
</ul>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGAElement" title="en/DOM/SVGAElement">SVGAElement</a></code> interface.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>IE</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop('1.8') }}</td>
        <td>{{ CompatIE('9.0') }}</td>
        <td>{{ CompatOpera('9.0') }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatAndroid('3.0') }}</td>
        <td>{{ CompatGeckoMobile('1.8') }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatSafari('3.0.4') }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>The chart is based on <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p>
<p>{{ note("No browser supports the full XLink set.") }}</p>
Revert to this revision