mozilla

Revision 330525 of a

  • Revision slug: SVG/Element/a
  • Revision title: a
  • Revision id: 330525
  • Created:
  • Creator: ethertank
  • 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

<div>{{SVGRefElem}}</div>

<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-US/docs/SVG/Element#Animation" title="SVG/Attribute#Animation">Animation elements</a>&nbsp;»<br />
        <a href="/en-US/docs/SVG/Element#Descriptive" title="SVG/Attribute#Descriptive">Descriptive elements</a>&nbsp;»<br />
        <a href="/en-US/docs/SVG/Element#Shape" title="SVG/Attribute#Shape">Shape elements</a>&nbsp;»<br />
        <a href="/en-US/docs/SVG/Element#Structural" title="SVG/Attribute#Structural">Structural elements</a>&nbsp;»<br />
        <a href="/en-US/docs/SVG/Element#Gradient" title="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="120" height="120" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;a xlink:href="https://developer.mozilla.org/en/SVG"&gt;
    &lt;text x="60" y="60" 
          text-anchor="middle" 
          text-decoration="underline" 
          fill="blue"&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-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Graphical event attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Presentation attributes</a>&nbsp;»</li>
  <li><a href="/en-US/docs/SVG/Attribute#XLink" title="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_Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/SVGAElement" title="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-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">these sources</a>.</p>
<p>{{note("No browser supports the full XLink set.")}}</p>
Revert to this revision