svg clippath диагональный перевод - PullRequest
Новая
       83

svg clippath диагональный перевод

0 голосов
/ 27 апреля 2020

У меня есть форма 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 таким образом, чтобы они переводились в следующем направлении enter image description here

Однако я не могу перевести clip2 как clip1 и clip3. Clip2 расположен под углом -45 градусов к clip1.

Если кто-то может помочь мне, будет здорово.

Заранее спасибо.

...