问题
This works exactly as expected because the svg morphs from a narwhal to an owl
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<svg viewBox="0 0 300 200" style="width:300px;height:200px;fill:black;">
<path d="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z">
<animate attributeName="d" dur="3s" values="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z;m 12.078446,138.49125 c 23.145893,-23.16487 -21.3363753,-20.31025 -7.0553753,-90.921251 c -6.408,-4.928 -4.77299995,-22.843 -1.058,-27.925 c -3.28599995,-5.915 -5.064,-11.8330002 -3.22399995,-19.6450002133789 c 10.35345725,4.2783550133789 4.35832795,13.2052152133789 9.18816095,16.3896842133789 c 2.8348133,-3.978774 19.8995273,-2.5827 22.8368203,-0.382425 c 2.220562,-3.72037 15.774695,-13.7547922 15.40755,-8.9030092 c -4.465134,2.454775 -0.708624,4.2837742 -9.01695,12.2244882 c 5.32964,8.207908 5.679349,17.501915 5.65539,25.031104 c 25.576849,28.403498 32.428749,80.056389 26.911139,100.271799 c -19.030258,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.220643,3.16303 3.817097,5.07083 3.507083,11.49096 c -11.422622,-10.20222 -22.302117,-8.01914 -35.799438,-3.10272 z" keyTimes="0;1" repeatCount="indefinite" />
</path>
</svg>
</body>
</html>I then tried to do the same thing using clip-path instead, but the tweening effect does not happen, it just abruptly jumps between narwhal and owl.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.svg-clipped {
clip-path: url(#svgNarwhal);
-webkit-clip-path: url(#svgNarwhal);
background:black;
width:1000px;
height:500px;
animation:change 5s linear infinite running;
}
@keyframes change{
50% {
clip-path: url(#svgOwl);
-webkit-clip-path: url(#svgOwl);
}
}
</style>
</head>
<body>
<div class="svg-clipped"></div>
<svg height="0" width="0">
<defs>
<clipPath id="svgNarwhal">
<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z"/>
</clipPath>
</defs>
</svg>
<svg height="0" width="0">
<defs>
<clipPath id="svgOwl">
<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 12.078446,138.49125 c 23.145893,-23.16487 -21.3363753,-20.31025 -7.0553753,-90.921251 c -6.408,-4.928 -4.77299995,-22.843 -1.058,-27.925 c -3.28599995,-5.915 -5.064,-11.8330002 -3.22399995,-19.6450002133789 c 10.35345725,4.2783550133789 4.35832795,13.2052152133789 9.18816095,16.3896842133789 c 2.8348133,-3.978774 19.8995273,-2.5827 22.8368203,-0.382425 c 2.220562,-3.72037 15.774695,-13.7547922 15.40755,-8.9030092 c -4.465134,2.454775 -0.708624,4.2837742 -9.01695,12.2244882 c 5.32964,8.207908 5.679349,17.501915 5.65539,25.031104 c 25.576849,28.403498 32.428749,80.056389 26.911139,100.271799 c -19.030258,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.220643,3.16303 3.817097,5.07083 3.507083,11.49096 c -11.422622,-10.20222 -22.302117,-8.01914 -35.799438,-3.10272 z"/>
</clipPath>
</defs>
</svg>
</body>
</html>How do I animate/transition the clip path?
回答1:
You need to also animate the path even when using clip-path. You cannot have transition between two different SVG clip-path
.svg-clipped {
clip-path: url(#svgNarwhal);
background: linear-gradient(red,blue);
height: 200px;
}<div class="svg-clipped"></div>
<svg height="0" width="0">
<defs>
<clipPath id="svgNarwhal">
<path d="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z">
<animate attributeName="d" dur="3s" values="m 79.90417,140.13005 c 4.814163,-3.45116 12.380583,-10.94538 10.28091,-15.6843 c -55.662827,0.27359 -84.3270338,-36.842603 -75.433276,-106.705679 c 0.658076,-4.13442 -1.600926,-11.1299328 -14.7518028310773,-17.7400727728322 c 10.5609958310773,0.2012860028322 18.1725028310773,4.0537649728322 22.4283328310773,13.7979877728322 c 10.831,1.034 19.149,12.204 15.502,14.565 c -1.9,-6.795 -10.693,-8.032 -16.026,-6.886 c -1.641,10.078 0.907,19.207 4.229,25.343 c 24.917,46.027001 137.181006,-15.58 154.574006,49.019001 c 14.8651,2.88285 125.12343,15.351823 91.43915,13.647013 c -32.52204,-1.64794 -64.44898,-3.64444 -92.74868,-5.13993 c -12.09544,45.92042 -67.9618,13.10682 -69.95629,18.24859 c -0.92661,4.82716 -19.018488,21.76546 -29.537232,17.53561 z;m 12.078446,138.49125 c 23.145893,-23.16487 -21.3363753,-20.31025 -7.0553753,-90.921251 c -6.408,-4.928 -4.77299995,-22.843 -1.058,-27.925 c -3.28599995,-5.915 -5.064,-11.8330002 -3.22399995,-19.6450002133789 c 10.35345725,4.2783550133789 4.35832795,13.2052152133789 9.18816095,16.3896842133789 c 2.8348133,-3.978774 19.8995273,-2.5827 22.8368203,-0.382425 c 2.220562,-3.72037 15.774695,-13.7547922 15.40755,-8.9030092 c -4.465134,2.454775 -0.708624,4.2837742 -9.01695,12.2244882 c 5.32964,8.207908 5.679349,17.501915 5.65539,25.031104 c 25.576849,28.403498 32.428749,80.056389 26.911139,100.271799 c -19.030258,-23.25184 -24.89244,-17.94927 -27.35238,-14.52863 c 2.220643,3.16303 3.817097,5.07083 3.507083,11.49096 c -11.422622,-10.20222 -22.302117,-8.01914 -35.799438,-3.10272 z" keyTimes="0;1" repeatCount="indefinite" />
</path>
</clipPath>
</defs>
</svg>来源：https://stackoverflow.com/questions/59440805/unable-to-transition-or-animate-css-clip-path