代码之家  ›  专栏  ›  技术社区  ›  learningtech

无法转换或动画css剪辑路径

clip-path svg css
  •  2
  • learningtech  · 技术社区  · 5 年前

    这完全符合预期,因为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>

    如何设置剪辑路径的动画/过渡?

    1 回复  |  直到 5 年前
        1
  •  2
  •   Temani Afif    5 年前

    即使在使用 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>
    推荐文章
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    3 月前
    Mass  ·  如何在Tailwind CSS v4中创建配置
    3 月前
    magenta placenta  ·  将css变量合并为一个变量
    3 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    4 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    4 月前
    Ben Halicki  ·  带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列
    4 月前
    Luckkks  ·  过渡色工作不正常
    4 月前
    ModernEraCaveman  ·  如何对齐我的Bootstrap容器以适应网页的整个宽度?
    4 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号