相关疑难解决方法(0)

嗨伙计!

我一直在阅读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; …