SVG测试.<use/>的动画变换

1、

2、测试代码：

<html>
<meta name="description" content="心跳动画">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1"  width="800" height="800" viewBox="0 0 400 400" style="enable-background:new 0 0 50 50;" xml:space="preserve" >
    <defs>
      <symbol id="heart01">
        <!-- ZC: 这是画的心形 -->
        <path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543  c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503  c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
        <!-- ZC: 这是画的心形左上角的那个小圆弧 -->
        <path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1  c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/>
      </symbol>
    </defs>

    <rect x="0" y="0" width="100%" height="100%" stroke="black" stroke-width="3" fill="none" />

<!--
  <g id="heart">
    <path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543  c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503  c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
    <path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1  c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/>
  </g>
-->

    <use x="0" y="0" witht="50" height="50" xlink:href="#heart01" />
    <rect x="0" y="0" width="10" height="10" fill="blue"  transform="translate(100 100)" />
</svg>


<style id="jsbin-css">
    svg
    {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    #heart
    {
        animation-name: beat;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
    }
    @keyframes beat
    {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }

    use
    {
        animation-name: beat02;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
    }
    @keyframes beat01
    {
        0% { transform: translate(100px, 100px) scale(1); } /*ZC: 用空格隔开 ! !*/
        50% { transform: translate(100px, 100px) scale(1.2); } /*ZC: 注意，CSS中translate中的偏移量要带单位[如px/em/rem(css3)等]*/
        100% { transform: translate(100px, 100px) scale(1); } /*ZC:还要注意,渲染顺序。transform里面是从后往前一步一步来渲染的。不按照此顺序的话，可能得不到预期的效果 ! ! !*/
    }
    @keyframes beat02
    {
        0% { transform: translate(3em, 3em) scale(1); }
        50% { transform: translate(3em, 3em) scale(1.2); }
        100% { transform: translate(3em, 3em) scale(1); }
    }
</style>

</html>

 

3、

4、

5、

 

posted @ 2018-10-25 15:26  Html5Skill  阅读(993)  评论(0)  编辑  收藏  举报