使用蒙版对svg进行动画处理时，我无法在svg外部进行裁剪 [英] Animating a svg, with a mask, I am having trouble clipping outside of the svg

问题描述

我有一个简单的svg，其中包含两个成组的路径，它们是T恤的形状。我创建了一个带有红色填充圆的蒙版，我正在将该蒙版从一条路径的底部到顶部进行动画处理。您可以看到它在Codepen上运行。我受困的部分是如何笔触修剪T恤外面的所有内容，以便您只能看到蒙面的路径在其中形成动画。

I have a simple svg with two grouped paths that is a shape of a tshirt. I have created a mask with a circle with the fill color red, I am animating that mask into from the bottom of one path to the top. You can see it running on codepen. The part where I am stuck is how do I clip everything outside the tshirt with a stroke so you can only see the masked path animate inside.

请提前感谢

这是代码笔 https：// codepen。 io / wispyco / pen / abvweMp

#svg {
  width: 100px;
  margin: 0 auto;
  display: block;
}

circle {
  animation-duration: 10s;
  animation-name: tower;
  animation-iteration-count: infinite;
}

@keyframes tower {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0px);
  }
}

<svg aria-labelledby="title" id="svg" viewBox="0 0 100 125" xmlns="http://www.w3.org/2000/svg">
      <g stroke="black" fill="none">
          <path d="M96.6 37.3l-10.5 9.2c-1.1 1-2.9.8-3.8-.4L76.5 38l-1.4 50.1c0 1.4-1.2 2.5-2.6 2.5H27.4c-1.4 0-2.5-1.1-2.6-2.5L23.4 38l-5.8 8c-.9 1.2-2.6 1.4-3.8.4L3.4 37.3c-1-.9-1.2-2.5-.3-3.5L18 15.3c2.9-3.7 7.4-5.8 12.1-5.8h7c.8 0 1.5.5 1.9 1.2 2.4 4.8 5.6 8 11.5 8s9.1-3.2 11.5-8c.4-.7 1.1-1.2 1.9-1.2h6.2c4.7 0 9.2 2.1 12.2 5.8l14.9 18.5c.6 1 .5 2.6-.6 3.5z"/>
        </g>
        <mask id="myMask">
        <g fill="red">
          <path d="M96.6 37.3l-10.5 9.2c-1.1 1-2.9.8-3.8-.4L76.5 38l-1.4 50.1c0 1.4-1.2 2.5-2.6 2.5H27.4c-1.4 0-2.5-1.1-2.6-2.5L23.4 38l-5.8 8c-.9 1.2-2.6 1.4-3.8.4L3.4 37.3c-1-.9-1.2-2.5-.3-3.5L18 15.3c2.9-3.7 7.4-5.8 12.1-5.8h7c.8 0 1.5.5 1.9 1.2 2.4 4.8 5.6 8 11.5 8s9.1-3.2 11.5-8c.4-.7 1.1-1.2 1.9-1.2h6.2c4.7 0 9.2 2.1 12.2 5.8l14.9 18.5c.6 1 .5 2.6-.6 3.5z"/>
        </g>
        </mask>
         <circle fill="red" cx="50" cy="50" r="50" mask="url(#myMask)" />

    </svg>

推荐答案

这是CSS解决方案，我将考虑使用遮罩。我将使用具有填充和不带描边的路径版本作为蒙版，以及具有填充和不带描边的路径版本作为背景：

Here is CSS solution where I will consider mask. I will be using the path version with fill and without stroke as mask and the path version with stroke and no fill as background:

.box {
  width:100px;
  height:100px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M96.6 37.3l-10.5 9.2c-1.1 1-2.9.8-3.8-.4L76.5 38l-1.4 50.1c0 1.4-1.2 2.5-2.6 2.5H27.4c-1.4 0-2.5-1.1-2.6-2.5L23.4 38l-5.8 8c-.9 1.2-2.6 1.4-3.8.4L3.4 37.3c-1-.9-1.2-2.5-.3-3.5L18 15.3c2.9-3.7 7.4-5.8 12.1-5.8h7c.8 0 1.5.5 1.9 1.2 2.4 4.8 5.6 8 11.5 8s9.1-3.2 11.5-8c.4-.7 1.1-1.2 1.9-1.2h6.2c4.7 0 9.2 2.1 12.2 5.8l14.9 18.5c.6 1 .5 2.6-.6 3.5z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M96.6 37.3l-10.5 9.2c-1.1 1-2.9.8-3.8-.4L76.5 38l-1.4 50.1c0 1.4-1.2 2.5-2.6 2.5H27.4c-1.4 0-2.5-1.1-2.6-2.5L23.4 38l-5.8 8c-.9 1.2-2.6 1.4-3.8.4L3.4 37.3c-1-.9-1.2-2.5-.3-3.5L18 15.3c2.9-3.7 7.4-5.8 12.1-5.8h7c.8 0 1.5.5 1.9 1.2 2.4 4.8 5.6 8 11.5 8s9.1-3.2 11.5-8c.4-.7 1.1-1.2 1.9-1.2h6.2c4.7 0 9.2 2.1 12.2 5.8l14.9 18.5c.6 1 .5 2.6-.6 3.5z"/></svg>') center/contain no-repeat;
  position:relative;
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-mask:inherit;
          mask:inherit;
}
.box::before {
  background:rgba(255,0,0,0.4);
  animation:move 3s infinite linear alternate;
}
.box::after {
  background:url('data:image/svg+xml;utf8,<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-width="3" fill="none" d="M96.6 37.3l-10.5 9.2c-1.1 1-2.9.8-3.8-.4L76.5 38l-1.4 50.1c0 1.4-1.2 2.5-2.6 2.5H27.4c-1.4 0-2.5-1.1-2.6-2.5L23.4 38l-5.8 8c-.9 1.2-2.6 1.4-3.8.4L3.4 37.3c-1-.9-1.2-2.5-.3-3.5L18 15.3c2.9-3.7 7.4-5.8 12.1-5.8h7c.8 0 1.5.5 1.9 1.2 2.4 4.8 5.6 8 11.5 8s9.1-3.2 11.5-8c.4-.7 1.1-1.2 1.9-1.2h6.2c4.7 0 9.2 2.1 12.2 5.8l14.9 18.5c.6 1 .5 2.6-.6 3.5z"/></svg>') center/contain no-repeat;
}
@keyframes move {
  from {
    transform:translateY(100%);
  }
}

<div class="box">

</div>

这篇关于使用蒙版对svg进行动画处理时，我无法在svg外部进行裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！