9

嗨伙计！

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

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

使用带有 css3 动画和<object>标签的 svg 文件运行良好。但是当我尝试将其放入<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。我.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 文件中（上面已编辑）。

大家觉得这种做法怎么样？

4

1 回答 1

14

这可以使用纯 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 的方法进行了测试。

于 2013-06-29T19:23:50.437 回答