SVG + css3 animation not working with link markup

Question

Hi folks!

I\'ve been reading the awesome article "Using SVG" from Chris Coyer (http://css-tricks.com/using-svg/), and deci

Answer 1

This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../index.html" target="_parent">
        <rect id="one" width="63.9" height="63.9" class="style3"/>
        <ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
    </a>
</svg>

The two important bits:

1. The xmlns:xlink="http://www.w3.org/1999/xlink" namespace.

2. The actual link: <a xlink:href="../index.html" target="_parent"> </a>

Note: This method has only been tested using the <object> method of embedding the SVG.