如何堆叠和动画2 svg路径？

我想通过用水填充圆圈并将我的标志移动到圆圈内来使我的标志动起来。我有2个独立的SVG路径。水和我的第二个标志之一。当我尝试通过放入div #banner来设置动画效果时，我同时获得动画效果，但徽标是'视图外'。我试图添加z索引，但它没有帮助。这里是我的代码：如何堆叠和动画2 svg路径？

.logo{z-index:1000; 
 
    position: relative;} 
 
    
 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #b7c6ce; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width:300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
     z-index:-1; 
 
    } 
 
    
 
    @keyframes fillAction { 
 
     0% { 
 
      transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
      transform: translate(0, -5px); 
 
     } 
 
    } 
 
    @keyframes waveAction { 
 
     0% { 
 
      transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
      transform: translate(0, 0); 
 
     } 
 
    }

<div id="banner"> 
 
     <div class="fill"> 
 
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
 
       <path fill="none" class="logo" viewBox="0 0 150 150" style="width:150px;height:150px;" stroke="#047F63" stroke-miterlimit="10" d="M200.922,388.703c-6.49,3.878-13.178,6.828-20.265,9.046 
 
      c-11.806,3.683-22.87,5.527-33.191,5.527c-17.342,0-33.564-3.592-48.683-10.784c-15.128-7.188-28.309-16.69-39.554-28.488 
 
      c-11.254-11.812-20.103-25.363-26.556-40.662c-6.452-15.31-9.678-31.074-9.678-47.296c0-18.813,3.128-35.877,9.403-51.173 
 
      c6.267-15.31,15.122-28.49,26.557-39.551c11.427-11.065,24.98-19.558,40.658-25.451c15.673-5.898,32.727-8.85,51.174-8.85 
 
      c18.435,0,33.465,2.858,45.082,8.572c11.617,5.715,20.832,12.353,27.664,19.918c6.816,7.552,11.798,15.113,14.931,22.684 
 
      c0.735,1.773,1.318,3.098,1.942,4.68l0.313,0.078c6.515-3.902,12.951-6.769,20.064-8.994c11.809-3.684,22.875-5.534,33.194-5.534 
 
      c17.343,0,33.566,3.596,48.681,10.788c15.127,7.196,28.308,16.695,39.559,28.491c11.251,11.806,20.104,25.36,26.555,40.66 
 
      c6.454,15.31,9.678,31.073,9.678,47.298c0,18.811-3.129,35.874-9.402,51.17c-6.268,15.309-15.119,28.489-26.559,39.555 
 
      c-11.424,11.065-24.974,19.553-40.658,25.449c-15.67,5.896-32.724,8.848-51.172,8.848c-18.436,0-33.469-2.861-45.084-8.572 
 
      c-11.617-5.711-20.832-12.351-27.663-19.914c-6.816-7.561-11.798-15.12-14.932-22.683 
 
      C402.155,391.527,400.922,388.703,400.922,388.7V300H300z"/> 
 
       <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
      c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
      c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/> 
 
      </svg> 
 
     </div> 
 
     </div>

我把代码[https://stackoverflow.com/questions/29738787/filling-water-animation/29740828#=][1]

[1]：http://wateranimation尝试过编辑，但至今没有运气。提前为帮助非常感谢，ネ

来源

2017-10-20 Neko

很抱歉，如果我误解，但我找不到任何使用标识类在你的例子 – Dale

嗨戴尔生病纠正。我必须编辑另一个版本。 – Neko

@ Dale_dale12不幸的是，在添加类后仍然没有运气。是否有可能把一个SVG图像放在另一个上面，但它们的动画不同？ – Neko

你有两个问题：

的标志是第一个在SVG文件，因此它被隐藏在水蓝色的后面。您需要移动它以便在水路之后。
相对于其他所有标志，标志太大，所以您需要缩放并移动一点，以便它位于正确的位置并且尺寸合适。要做到这一点，我添加了一个变换的标志路径：
```
transform="scale(0.3,0.3) translate(30,-30)" 
```

这些变化，你会得到一个更好的结果。

.logo{z-index:1000; 
 
    position: relative;} 
 
    
 
    #banner { 
 
     border-radius: 50%; 
 
     width: 150px; 
 
     height: 150px; 
 
     background: #b7c6ce; 
 
     overflow: hidden; 
 
     backface-visibility: hidden; 
 
     transform: translate3d(0, 0, 0); 
 
    } 
 
    #banner .fill { 
 
     animation-name: fillAction; 
 
     animation-iteration-count: 1; 
 
     animation-timing-function: cubic-bezier(.2, .6, .8, .4); 
 
     animation-duration: 4s; 
 
     animation-fill-mode: forwards; 
 
    } 
 
    #banner #waveShape { 
 
     animation-name: waveAction; 
 
     animation-iteration-count: infinite; 
 
     animation-timing-function: linear; 
 
     animation-duration: 0.5s; 
 
     width:300px; 
 
     height: 150px; 
 
     fill: #04ACFF; 
 
     z-index:-1; 
 
    } 
 
    
 
    @keyframes fillAction { 
 
     0% { 
 
      transform: translate(0, 150px); 
 
     } 
 
     100% { 
 
      transform: translate(0, -5px); 
 
     } 
 
    } 
 
    @keyframes waveAction { 
 
     0% { 
 
      transform: translate(-150px, 0); 
 
     } 
 
     100% { 
 
      transform: translate(0, 0); 
 
     } 
 
    }

<div id="banner"> 
 
    <div class="fill"> 
 
    <svg width="300px" height="300px" viewBox="0 0 300 300" overflow="visible"> 
 
     <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4 
 
      c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9 
 
      c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/> 
 
     <path transform="scale(0.3,0.3) translate(30,-30)" 
 
      fill="none" class="logo" stroke="#047F63" stroke-miterlimit="10" d="M200.922,388.703c-6.49,3.878-13.178,6.828-20.265,9.046 
 
      c-11.806,3.683-22.87,5.527-33.191,5.527c-17.342,0-33.564-3.592-48.683-10.784c-15.128-7.188-28.309-16.69-39.554-28.488 
 
      c-11.254-11.812-20.103-25.363-26.556-40.662c-6.452-15.31-9.678-31.074-9.678-47.296c0-18.813,3.128-35.877,9.403-51.173 
 
      c6.267-15.31,15.122-28.49,26.557-39.551c11.427-11.065,24.98-19.558,40.658-25.451c15.673-5.898,32.727-8.85,51.174-8.85 
 
      c18.435,0,33.465,2.858,45.082,8.572c11.617,5.715,20.832,12.353,27.664,19.918c6.816,7.552,11.798,15.113,14.931,22.684 
 
      c0.735,1.773,1.318,3.098,1.942,4.68l0.313,0.078c6.515-3.902,12.951-6.769,20.064-8.994c11.809-3.684,22.875-5.534,33.194-5.534 
 
      c17.343,0,33.566,3.596,48.681,10.788c15.127,7.196,28.308,16.695,39.559,28.491c11.251,11.806,20.104,25.36,26.555,40.66 
 
      c6.454,15.31,9.678,31.073,9.678,47.298c0,18.811-3.129,35.874-9.402,51.17c-6.268,15.309-15.119,28.489-26.559,39.555 
 
      c-11.424,11.065-24.974,19.553-40.658,25.449c-15.67,5.896-32.724,8.848-51.172,8.848c-18.436,0-33.469-2.861-45.084-8.572 
 
      c-11.617-5.711-20.832-12.351-27.663-19.914c-6.816-7.561-11.798-15.12-14.932-22.683 
 
      C402.155,391.527,400.922,388.703,400.922,388.7V300H300z"/> 
 
    </svg> 
 
    </div> 
 
</div>

来源

2017-10-22 03:25:58

谢谢@Paul LeBeau我已经编辑了一下，这是最终结果[链接]（http://www.ewelinawoloszyn.com/water_animation5.html） – Neko

如何堆叠和动画2 svg路径？

回答

相关问题