剪切路径被容器切断

Question

所以我已经很接近我想要的效果了，但问题是我在旋转时使用的 clipPath 被容器切断了。有什么办法可以解决这个问题吗？我试着在viewBox和其他属性上做手脚，但是没有用。我对使用clipPath不是超级精通。使用CSS clip-path会不会是一个更好的调用，而只是用相反的方式旋转一个伪元素？

.red {
  background-image: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg');
  background-size: 90%;
  height: 100vh;
  width: 700px;
  clip-path: url(#clipPolygon);
  position: relative;
  z-index: 2;
  margin-top: 120px;
  margin-left: 250px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

svg {
}

defs {
  transition: all 5s;
  transform: rotate(360deg);
}

<div class="red">
  <svg>
   <defs>
    <clipPath id="clipPolygon">
      <polygon points="200 250,400 100,300 50,0 0">
        <animateTransform attributeName="transform" begin="0s" dur="2.5s" type="rotate" from="360 160 160" to="0 160 160" repeatCount="indefinite"/>
      </polygon>
    </clipPath>
   </defs>
  </svg>
</div>

<div class="bg">
  <img src="https://www.mcgilvraydesign.com/img/bgdemo3.jpg" alt="">
</div>

Answer 1

你可以使用你的多边形作为CSS掩码，然后你可以很容易地处理旋转使用两个元素旋转的相反方向

.red {
  background:url(https://www.mcgilvraydesign.com/img/bgdemo3.jpg) center/contain no-repeat;
  min-height:350px;
  height: 100vh;
  overflow:hidden;
}
.red > div {
  /* control the mask here */
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>') 
               center/ /* position */
               300px 200px /* size */
               no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0 400 300"><polygon points="200 250,400 100,300 50,0 0"/></svg>') 
               center/
               300px 200px 
               no-repeat;
  height:100%;
  position:relative;
  animation:rotate 2s linear infinite;
}
.red > div::before {
  content:"";
  position:absolute;
  /*big values here to avoid the cut effet*/
  top:-100%;
  left:-100%;
  right:-100%;
  bottom:-100%;
  /* */
  /* Control the skull here */
  background: url('https://cdn.mos.cms.futurecdn.net/u8wSHMmMMXzZuAFBCmcsCK-650-80.jpg') 
     50% 45%/ /* position */
     22% auto /* size*/
     no-repeat,
     #fff;
  animation:inherit;
  animation-direction:reverse;
}

@keyframes rotate {
  to {
    transform:rotate(-360deg);
  }
}

body {
 margin:0;
}

<div class="red">
 <div></div>
</div>