svg剪切路径对角线翻译。

Question

我有一个如下的svg形状。

/* vertical top x=0 y= negative */
@keyframes s1 {
    100% {
           transform: translate(0px,-97px);
    }
  }
/*diagonal top right x=poitive y=negative*/
@keyframes s2 {
    100% {
           transform: translate(97px, -97px);
    }
  }
/*horizontal right x=positive y=0 */
@keyframes s3 {
    100% {
           transform: translate(97px,0px);
    }
  }
  
  .x1 {
       clip-path: url(#clipx1);  
  }
 .clip1 {
    
    animation: s1 5s forwards cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
  }
  .x2 {
       clip-path: url(#clipx2);  
  }
.clip2 {
    
    animation: s2 5s forwards cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
  }  
  .x3 {
       clip-path: url(#clipx3);  
  }
.clip3 {
    animation: s3 5s forwards cubic-bezier(0.47, 0, 0.745, 0.715) infinite;
  }

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1280" height="720">
  <title>Untitled-2</title>
  <g id="background">
    <rect x="0.5" y="0.5" width="337" height="409" fill="#ff5050"/>
    <path d="M801,115V523H465V115H801m1-1H464V524H802V114Z" transform="translate(-464 -114)" fill="#ff5050"/>
  </g>
    <defs>
          <clipPath id="clipx1">
               <rect class="clip1" x="160.5" y="60.5" width="5" height="97" fill="#fff"/>     
          </clipPath>

          <clipPath id="clipx2">
               <rect class="clip2" x="621.13" y="238.57" width="97" height="5" transform="translate(-438.33 430.11) rotate(-45)" fill="#fff"/>     
          </clipPath>
          
          <clipPath id="clipx3">
               <rect class="clip3" x="174.5" y="167.5" width="97" height="5" fill="#fff"/>     
          </clipPath>
          </defs>

    <rect class="x1" x="160.5" y="60.5" width="5" height="97" fill="#fff"/>
    <rect class="x2" x="621.13" y="238.57" width="97" height="5" transform="translate(-438.33 430.11) rotate(-45)" fill="#fff"/>
    <rect class="x3" x="174.5" y="167.5" width="97" height="5" 
    fill="#fff"/>
    </svg>
   

我想把clipPath里面的矩形翻译成以下方向。

但是，我不能像剪辑1和剪辑3那样翻译剪辑2。剪辑2位于-45度角的剪辑1。

如果有人能帮助我将是巨大的。

先谢谢你。

Answer 1

因此，为了让你的线条在动画中可见，你需要添加transform属性来应用2D变换并使元素可见，就在你的#clipx2 id旁边。

 .x2 {
       clip-path: url(#clipx2)transform;  
  }