SVG + css3动画无法使用链接标记

Question

嗨伙计!

我一直在阅读Chris Coyer 撰写的精彩文章"使用SVG"(http://css-tricks.com/using-svg/),并决定使用一些东西制作动画徽标.但我有点打架.我会解释一下.

我正在使用.svg文件作为徽标.我正在使用<object>标签在html文件中提取文件.在SVG文件中,我使用css3动画来对svg中的对象做一些技巧.

使用带有css3动画的svg文件,<object>标签运行良好.但是当我尝试将其置于<a>标签内时,问题就出现了.我正在使用一个技巧指向JohanHerná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.我.contentDocument在Chrome上访问内容时遇到问题,可能是由文件来源政策引起的(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元素SVG的:

<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>

注意:此方法仅使用<object>嵌入SVG 的方法进行测试.