svg 符号标签中路径的 css3 关键帧动画

Question

是否可以使用 css3 关键帧动画为符号标记中的路径设置动画？它在我的情况下不起作用。

示例:

http://codepen.io/anon/pen/Hfbmr

HTML:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-love" viewBox="0 0 54 54">
        <title>Love</title> 
        <path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
        s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
        <path id="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
        c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
        c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
        c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
        c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
        c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
        s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
        s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
        c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
        />
</symbol>

CSS:

.icon-love {
height: 54px;     
width: 54px;
}

#icon-love-heart {
animation-name: 'heartbeat';
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}

干杯菲利普

Answer 1

完全有可能。如果你放下 <use xlink:href="#icon-love"/> 它会起作用部分，只使用普通的 svg。如果您担心保持代码清洁，我建议您将 svg 存储在一个变量中并动态输出它，而不是使用 <use>标记，它会中断动画。

http://codepen.io/easwee/pen/xFDbu

<svg class="icon-love" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
<path id="icon-love-circle" fill="#000000" d="M27,3c13.2,0,24,10.8,24,24S40.2,51,27,51S3,40.2,3,27S13.8,3,27,3 M27,0C12.1,0,0,12.1,0,27
            s12.1,27,27,27s27-12.1,27-27S41.9,0,27,0L27,0z"/>
<path class="icon-love-heart" fill="#000000" d="M15.2,23.2c0-2,0.6-3.5,1.7-4.6c1.1-1.1,2.7-1.7,4.7-1.7c0.6,0,1.1,0.1,1.7,0.3c0.6,0.2,1.1,0.5,1.6,0.8
            c0.5,0.3,0.9,0.6,1.3,0.9c0.4,0.3,0.7,0.6,1,0.9c0.3-0.3,0.7-0.6,1-0.9c0.4-0.3,0.8-0.6,1.3-0.9c0.5-0.3,1-0.6,1.6-0.8
            c0.6-0.2,1.1-0.3,1.7-0.3c2,0,3.6,0.6,4.7,1.7c1.1,1.1,1.7,2.6,1.7,4.6c0,2-1,4-3.1,6l-8.3,8c-0.2,0.2-0.4,0.2-0.6,0.2
            c-0.2,0-0.4-0.1-0.6-0.2l-8.4-8.1c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.2-0.4-0.5-0.7-0.9c-0.3-0.4-0.6-0.9-0.9-1.3
            c-0.3-0.4-0.5-1-0.7-1.6C15.4,24.4,15.2,23.8,15.2,23.2z M17,23.2c0,1.5,0.8,3.1,2.5,4.8l7.8,7.5L35,28c1.7-1.7,2.5-3.3,2.5-4.8
            c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.6-0.4-1-0.7-1.3c-0.3-0.3-0.7-0.6-1.1-0.8c-0.4-0.2-0.8-0.3-1.3-0.4c-0.4-0.1-0.8-0.1-1.3-0.1
            s-1,0.1-1.5,0.3c-0.5,0.2-1,0.5-1.5,0.9c-0.5,0.3-0.8,0.7-1.2,1c-0.3,0.3-0.6,0.6-0.8,0.8c-0.2,0.2-0.4,0.3-0.7,0.3
            s-0.5-0.1-0.7-0.3c-0.2-0.2-0.5-0.5-0.8-0.8c-0.3-0.3-0.7-0.6-1.2-1c-0.5-0.3-0.9-0.6-1.5-0.9c-0.5-0.2-1-0.3-1.5-0.3
            c-0.5,0-0.9,0-1.3,0.1c-0.4,0.1-0.8,0.2-1.3,0.4c-0.4,0.2-0.8,0.5-1.1,0.8c-0.3,0.3-0.5,0.8-0.7,1.3C17.1,21.8,17,22.5,17,23.2z"
            />
</svg>

还为跨浏览器 css(webkit、firefox 和标准)添加了前缀:

.icon-love {width:54px;height:54px;}

.icon-love-heart {
 -moz-animation: heartbeat 5s linear infinite; 
  -webkit-animation: heartbeat 5s linear infinite; 
  animation: heartbeat 5s linear infinite;
   -moz-transform-origin:50% 50%;
 -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;

}

@-moz-keyframes heartbeat {
    0% { -moz-transform: scale(1); }
    30% { -moz-transform: scale(1); }
    40% { -moz-transform: scale(1.08); }
    50% { -moz-transform: scale(1); }
    60% { -moz-transform: scale(1); }
    70% { -moz-transform: scale(1.05); }
    80% { -moz-transform: scale(1); }
    100% { -moz-transform: scale(1); }
}


@-webkit-keyframes heartbeat {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1); }
    40% { -webkit-transform: scale(1.08); }
    50% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.05); }
    80% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(1.08); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}