我需要将整个手和手机元素（hand_phone类）向上滑动到红色背景上的当前位置。我遇到的麻烦只是在红色背景上显示手，而不是在蓝色或白色上滑动。好像手和手机在其他一切的后面，红色的盒子就是一个窗口。我试过了clipPath，隐藏：溢出，但没有任何运气。
https://jsfiddle.net/8moofbef/3/
import tkinter
Traceback (most recent call last):
File "/usr/lib/python3.5/tkinter/__init__.py", line 36, in <module>
import _tkinter
ImportError: No module named '_tkinter'
During handling of the above exception, another exception occurred:
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/usr/lib/python3.5/tkinter/__init__.py", line 38, in <module>
raise ImportError(str(msg) + ', please install the python3-tk package')
ImportError: No module named '_tkinter', please install the python3-tk package
答案 0 :(得分：0)
定义您希望手显示在其中的<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>