无法过渡或动画css剪切路径

问题描述 投票：2回答：1

这完全符合预期，因为svg从独角鲸变成了猫头鹰

<!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>

然后我尝试使用clip-path做相同的事情，但是补间效果没有发生，它只是突然在独角鲸和猫头鹰之间跳跃。

<!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>

我如何动画/过渡剪辑路径？

css svg clip-path
1个回答
2
投票

即使使用clip-path，也需要设置路径动画。您不能在两个不同的SVG剪切路径之间进行转换

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.