clipPath 被容器截断

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>

clipPath 被容器截断

clipPath cut off by container

html

css

svg

clip-path