html - 使用蒙版制作 svg 动画,我无法在 svg 之外进行剪辑
问题描述
我有一个简单的 svg,其中包含两个分组的路径,它们是 T 恤的形状。我创建了一个带有填充颜色为红色的圆圈的蒙版,我将该蒙版动画化为从一条路径的底部到顶部。你可以看到它在 codepen 上运行。我被卡住的部分是如何用笔划剪辑 T 恤外面的所有东西,这样你就只能看到里面的蒙版路径动画。
提前感谢
这是代码笔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 解决方案。我将使用带填充且不带笔划的路径版本作为蒙版,使用带笔划且不带填充的路径版本作为背景:
.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>
推荐阅读
- docker - Docker COPY cmd that respects .dockerignore?
- arrays - getting error on passing array to function in C
- apache-spark - AnalysisException:CSV 数据源不支持数组
我在工作,我需要立即帮助,请我有一个镶木地板文件,我需要将其转换为 csv。你能帮帮我吗?
错误:
AnalysisException: CSV data source does not support array<struct<company:string,dateRange:string,description:str
- javascript - Discord.js role not getting added with no errors
- c - Why am I getting a character in output when my input is 5 or more than 5? It is pure mathematical equation. If anything is wrong please tell me
- javascript - 渲染组件时不触发 useEffect
- kotlin - 检测具体类型中的可空性
- javascript - 使用 javascript 创建 SVG 元素
- php - 如何在我的自定义 MVC 框架中设置 Flash 消息?
- linux - for循环变量中的Bash调用变量