SVG + css3 动画不适用于链接标记

Question

大家好！

我一直在阅读 Chris Coyer (http://css-tricks.com/using-svg/) 的精彩文章 “使用 SVG”，并决定使用一些东西来制作动画徽标。但我一直在打架。我会解释的。

我正在为徽标使用 .svg 文件。我正在使用<object> 标记将文件拉到一个html 文件中。在 SVG 文件中，我使用 css3 动画 对 svg 中的对象进行一些技巧。

使用带有 css3 动画的 svg 文件和 <object> 标签效果很好。但是当我尝试将其放入 <a> 标记时，问题就开始了。我正在使用指向 Johan Hernández 对文章的评论的技巧（我不知道技巧的起源），并且在这个小提琴中举例说明：http://jsfiddle.net/WEbGd/。

问题在于，链接有效，但 SVG 内的 css3 动画无效。我知道这是因为 z-index 把戏......但我还没有找到更好的方法。

也许有人建议让这项工作发挥作用，或者至少是另一种方法？我做了一支笔来帮助理解我在做什么：http://codepen.io/seraphzz/pen/CJrBp。

这是我为测试目的制作的 svg 代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="176.5px" height="63.9px" viewBox="0 0 176.5 63.9" enable-background="new 0 0 176.5 63.9" xml:space="preserve" id="logo-svg">
<style>
    .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);}
    }
    
</style>
<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"/>
</svg>

非常欢迎任何帮助！

谢谢！

编辑：

经过一些研究，我没有找到一个可能且干净的解决方案，仅使用 css3 和 html5。因此，我正在尝试使用一些 javascript。我已经用一些 javascript 对以前的笔做了一个叉子，这是我到目前为止得到的：http://codepen.io/seraphzz/pen/lxKAw

我想要做的是使用 Javascript 访问 SVG 的内部 DOM。我在 Chrome 上使用 .contentDocument 访问内容时遇到问题，这可能是由文件源策略引起的（Chrome 调试返回此错误：Blocked a frame with origin "http://s.codepen.io" from accessing a frame with origin "http://favolla.com.br". Protocols, domains, and ports must match.。

我的想法是使用一些 id 访问 SVG 文件中的元素，然后使用 javascript，例如使用 .addClass 更改元素的类。添加的类在 .svg 文件中（上面已编辑）。

你们如何看待这种方法？

Answer 1

这可以使用纯 CSS3 和 HTML5 来完成。诀窍是通过使用 xlink 元素将链接 inside 嵌入到 svg 中，并将目标设置为 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>

两个重要的位：

1. xmlns:xlink="http://www.w3.org/1999/xlink" 命名空间。

2. 实际链接：<a xlink:href="../index.html" target="_parent"> </a>

注意：此方法仅使用嵌入 SVG 的 <object> 方法进行了测试。