title: SVG + css3 animation not working with link markup
body: <p><strong>Hi folks!</strong></p>
  <p>I've been reading the awesome article <strong>&quot;Using SVG&quot;</strong> from Chris Coyer (<a href="http://css-tricks.com/using-svg/" rel="noreferrer">http://css-tricks.com/using-svg/</a>), and decided to use some things to make an animated logo. But I'ts been a little fight. I'll explain.</p>
  <p>I'm using an <strong>.svg</strong> file for the logo. I'm pulling the file in an html file using the <code>&lt;object&gt;</code> tag. Inside the SVG file, I'm using <strong>css3 animations</strong> to do some tricks with the objects inside the svg.</p>
  <p>Using the svg file with css3 animations and the <code>&lt;object&gt;</code> tag is working good. But the problem starts when I try to put this inside a <code>&lt;a&gt;</code> tag. I'm using a trick pointed at the Johan Hernández' comment on the article (I don't know the origin of the trick), and <strong>exemplified in this fiddle</strong>: <a href="http://jsfiddle.net/WEbGd/" rel="noreferrer">http://jsfiddle.net/WEbGd/</a>.</p>
  <p>The problem is, with that, the link works, but not the css3 animations inside the SVG. I know it's because the <code>z-index</code> trick... but I didn't found yet a better aproach for this.</p>
  <p>Maybe somebody have a suggestion to make this work, or at least for another approach? I made a Pen to help understand what I'm doing: <a href="http://codepen.io/seraphzz/pen/CJrBp" rel="noreferrer">http://codepen.io/seraphzz/pen/CJrBp</a>.</p>
  <p><strong>Here's the svg code that I made for test purposes:</strong></p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;176.5px&quot; height=&quot;63.9px&quot; viewBox=&quot;0 0 176.5 63.9&quot; enable-background=&quot;new 0 0 176.5 63.9&quot; xml:space=&quot;preserve&quot; id=&quot;logo-svg&quot;&gt;
  &lt;style&gt;
      .style3{
          fill:   #9F4400;
      }
      .style4{
          fill:   #9331D3;
      }
      
      #logo-svg, #one{
          -webkit-transform-origin: center center;
             -moz-transform-origin: center center;
               -o-transform-origin: center center;
              -ms-transform-origin: center center;
                  transform-origin: center center;
          -webkit-transition: all .2s ease-in-out;
             -moz-transition: all .2s ease-in-out;
               -o-transition: all .2s ease-in-out;
              -ms-transition: all .2s ease-in-out;
                  transition: all .2s ease-in-out;
      }
      
      #logo-svg{
          -webkit-transform: scale(0.9);
             -moz-transform: scale(0.9);
               -o-transform: scale(0.9);
              -ms-transform: scale(0.9);
                  transform: scale(0.9);
      }
      
      #logo-svg:hover{
          -webkit-transform: scale(1);
             -moz-transform: scale(1);
               -o-transform: scale(1);
              -ms-transform: scale(1);
                  transform: scale(1);    
      }
      
      #one{
          -webkit-animation: one .3s ease-in-out;
          -webkit-animation-play-state: paused
          -moz-animation: one .3s ease-in-out;
          -moz-animation-play-state: paused;
          -o-animation: one .3s ease-in-out;
          -o-animation-play-state: paused;
      }
      
      /*.active class added for test purposes*/
      #logo-svg:hover #one, #one.active{
          -webkit-animation-play-state: running;
          -moz-animation-play-state: running;
          -o-animation-play-state: running;
      }
      
      @-webkit-keyframes one{
          0%,50%,100%{-webkit-transform: rotate(0deg);}
          25%,75%{-webkit-transform: rotate(10deg);}
      }
      @-moz-keyframes one{
          0%,50%,100%{-moz-transform: rotate(0deg);}
          25%,75%{-moz-transform: rotate(10deg);}
      }
      @-o-keyframes one{
          0%,50%,100%{-o-transform: rotate(0deg);}
          25%,75%{-o-transform: rotate(10deg);}
      }
      
  &lt;/style&gt;
  &lt;rect id=&quot;one&quot; width=&quot;63.9&quot; height=&quot;63.9&quot; class=&quot;style3&quot;/&gt;
  &lt;ellipse cx=&quot;127.8&quot; cy=&quot;34.5&quot; rx=&quot;48.8&quot; ry=&quot;12.8&quot; class=&quot;style4&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Any help would be very welcome!</p>
  <p>Thanks!</p>
  <h2>Edit:</h2>
  <p>After some research, I didn't found a possible and clean solution for this with only css3 and html5. So I'm giving a shot with a bit of javascript. I've made a fork of the previous pen with some javascript, here's what I'm getting until now: <a href="http://codepen.io/seraphzz/pen/lxKAw" rel="noreferrer">http://codepen.io/seraphzz/pen/lxKAw</a></p>
  <p>What I'm trying to do is access the inner DOM of the SVG with Javascript. I'm having a problem accessing the content with <code>.contentDocument</code> on Chrome, witch may be caused by the file origin policy (the Chrome debug is returning this error: <code>Blocked a frame with origin &quot;http://s.codepen.io&quot; from accessing a frame with origin &quot;http://favolla.com.br&quot;. Protocols, domains, and ports must match.</code>.</p>
  <p>My idea here is access an element inside the SVG file with some id, and then, with javascript, change the class of the element with <code>.addClass</code>, for example. The class added is inside the .svg file (edited above).</p>
  <p>What do you guys think about this approach?</p>