如何在使用关键帧动画滑动 SVG 元素时隐藏溢出？答案

【问题标题】：How to hide overflow when sliding an element of an SVG in using keyframe animation?如何在使用关键帧动画滑动 SVG 元素时隐藏溢出？
【发布时间】：2018-06-21 03:46:54
【问题描述】：

我需要将整个手和电话元素（hand_phone 类）向上滑动到红色背景上的当前位置。我遇到的麻烦是只在红色背景上显示手，而不是在蓝色或白色上向上滑动。就好像手和电话在其他一切的后面，而红色的盒子是一扇窗户。我试过 clipPath, hidden: overflow，但没有任何运气。

https://jsfiddle.net/8moofbef/3/

.hand_phone {
  animation: slide 1s;
}

@keyframes slide {
from {transform: translateY(400px)}
to {transform: translateY(0px)}
}

【问题讨论】：

我不明白你有什么疑问。

标签： css animation svg

【解决方案1】：

定义您希望手出现在其中的<clipPath>。在这种情况下，它只是一个与红色大小相同的<rect>。

<defs>
  <clipPath id="red-rect-clip">
    <rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
  </clipPath>  
</defs>

其次，您需要将剪辑路径应用于正确的元素。它不能是<g class="hand_phone">，因为它正在通过变换进行动画处理。并且您应用的任何变换也将移动附加到它的剪辑路径。

因此，您需要做的是用父组围绕“hand_phone”元素。然后应用剪辑路径。这样剪辑就不会移动，而你会得到你想要的效果。
```
<g clip-path="url(#red-rect-clip)">
  <g class="hand_phone">
    <...>
  </g>
</g>
```

.hand_phone {
  animation: slide 1s;
}

@keyframes slide {
from {transform: translateY(400px)}
to {transform: translateY(0px)}
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1920 1920" style="enable-background:new 0 0 1920 1920;" xml:space="preserve">

<defs>
  <clipPath id="red-rect-clip">
    <rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
  </clipPath>  
</defs>

<style type="text/css">
	.st0{fill:#057BDB;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#FF0049;}
	.st3{clip-path:url(#SVGID_2_);}
	.st4{fill:#01434C;}
	.st5{fill:#03828E;}
	.st6{fill:#085E67;}
	.st7{fill:#6CB5AE;}
	.st8{fill:#25A599;}
	.st9{fill:#B5B5B5;}
	.st10{fill:#DDDDDD;}
	.st11{fill:#F27040;}
	.st12{fill:#F48359;}
	.st13{fill:#F05A2B;}
	.st14{fill:#253D46;}
	.st15{fill:#969BA4;}
	.st16{fill:#465B66;}
	.st17{fill:#AFBDC5;}
	.st18{fill:#FF8B00;}
	.st19{fill:#566D78;}
	.st20{fill:#5D6972;}
	.st21{fill:#78909B;}
	.st22{fill:#F8A773;}
	.st23{fill:#FAB685;}
	.st24{fill:#F79B6A;}
	.st25{fill:#140F2C;}
	.st26{fill:#E5E5E5;}
	.st27{fill:#F4F4F4;}
	.st28{fill:#150E39;}
	.st29{fill:#1C1749;}
	.st30{fill:#171043;}
	.st31{fill:#5E6A7E;}
	.st32{fill:#0A038E;}
	.st33{fill:#30120B;}
	.st34{fill:#CBE6F3;}
	.st35{fill:#838E93;}
	.st36{fill:#BCB1D7;}
	.st37{fill:#9F98C6;}
	.st38{fill:#D8CEE6;}
	.st39{fill:#FF88A7;}
	.st40{fill:#EAEBF0;}
	.st41{fill:#F0F1F8;}
	.st42{fill:#D5DAEE;}
	.st43{fill:#378E43;}
	.st44{fill:#BD3A27;}
	.st45{fill:#795549;}
	.st46{fill:#F69D5E;}
	.st47{fill:#221F1F;}
	.st48{fill:#403F41;}
	.st49{fill:#E6E6E7;}
	.st50{fill-rule:evenodd;clip-rule:evenodd;fill:#D0A785;}
	.st51{fill-rule:evenodd;clip-rule:evenodd;fill:#FFD6B6;}
	.st52{fill-rule:evenodd;clip-rule:evenodd;fill:#AAAAAA;}
	.st53{fill-rule:evenodd;clip-rule:evenodd;fill:#CCE9F9;}
	.st54{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
	.st55{fill-rule:evenodd;clip-rule:evenodd;fill:#CBCBCB;}
	.st56{fill-rule:evenodd;clip-rule:evenodd;fill:#989898;}
	.st57{fill-rule:evenodd;clip-rule:evenodd;fill:#93C6E2;}
	.st58{fill:#CBCBCB;}
	.st59{fill:#E6E6E6;}
	.st60{fill:#96BEE5;}
	.st61{opacity:0.5;fill:#F2F2F2;}
	.st62{fill:#F2F2F2;}
	.st63{fill:#CBCDCE;}
	.st64{fill:#0D3EB7;}
	.st65{fill:#4D4D4D;}
	.st66{opacity:0.1;}
	.st67{fill:#808080;}
	.st68{fill:#D7D8D9;}
	.st69{fill:#F1F2F2;}
	.st70{fill:#FFFEF7;}
	.st71{fill:#BDCAE8;}
	.st72{opacity:0.5;fill:#FFFFFF;}
	.st73{fill:#D7D7D7;}
	.st74{fill:#D7869D;}
	.st75{opacity:0.2;fill-rule:evenodd;clip-rule:evenodd;fill:#1A1A1A;}
	.st76{opacity:0.65;}
	.st77{fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;}
	.st78{fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:1.9968,1.9968;}
	.st79{opacity:0.95;fill:none;stroke:#ED1C24;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:2;}
	.st80{fill:#567396;}
	.st81{fill:#FFFFFF;stroke:#057BDB;stroke-width:0.75;stroke-miterlimit:10;}
</style>

<g>
	<rect y="-1" class="st0" width="1920" height="1920"/>
  
  <g class="white_rectangle">
	  <rect x="140.6" y="666.1" class="st1" width="849.2" height="793.9"/>
  </g>
  
	<g class="red_rectangle">
		 <rect x="167.5" y="981.4" class="st2" width="391.7" height="451"/>
	</g>

  <g clip-path="url(#red-rect-clip)">
    <g class="hand_phone">
  		<path class="st46" d="M435.6,1066.8l-16,21c-4.1,5.3-23.5,14.4-  15.2,22.4c10.1,9.7,22.5,10.1,26.5,5.8l28-31
				c4.2-5.1,10.1-14.8,1.3-23.2C450.1,1052,439.5,1062.5,435.6,1066.8z"/>
  		<path class="st46" d="M280.3,1138.7c-0.6,33.7-3.4,107.9-3.4,107.9s-1.2,15.3,4.8,22.2c6.1,6.9,15.1,9.9,15.1,9.9l-15.1,31.5
				l80.3,42.6l56.4-87.9l-118.3-110.6C300.2,1154.2,303.5,1137,280.3,1138.7z"/>
  		<path class="st47" d="M418.3,1044.1H312.8c-7.1,0-12.9,5.8-12.9,12.9v201.7c0,7.2,5.8,12.9,12.9,12.9h105.5
					c7.2,0,12.9-5.8,12.9-12.9v-201.7C431.3,1049.9,425.5,1044.1,418.3,1044.1z"/>
  		<rect x="308" y="1072.8" class="st1" width="115.2" height="167.1"/>
  		<circle class="st48" cx="365.6" cy="1060" r="4.8"/>
  		<path class="st48" d="M374,1250.7h-16.8c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3H374c2.9,0,5.3-2.4,5.3-5.3
					C379.3,1253,376.9,1250.7,374,1250.7z"/>

    	<path class="st46" d="M424.7,1208l-5.1,6.5c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5.1l4.4-5.6
				c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1193.3,428.6,1203.8,424.7,1208z"/>
    	<path class="st46" d="M424.7,1166.5l-5.1,6.5c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5.1l4.4-5.6
				c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1151.8,428.6,1162.2,424.7,1166.5z"/>
    	<path class="st46" d="M424.7,1124.6l-5.1,6.4c-4.1,5.3-9,14.4-0.7,22.4c10.1,9.7,20.7-0.8,24.6-5l4.4-5.6
				c4.2-5.1,10.1-14.8,1.3-23.2C439.2,1109.9,428.6,1120.4,424.7,1124.6z"/>
    	<polygon class="st49" points="270.7,1297.2 200,1433.1 335.4,1433.1 376.7,1353.7 			"/>
     	<polygon class="st1" points="270.7,1297.2 200,1433.1 267.7,1433.1 323.7,1325.5 			"/>
    </g>
  </g>
</g>
</svg>

https://jsfiddle.net/8moofbef/4/

【讨论】：