所以我一直在尝试为一些不同颜色的文本制作挥动动画，因为我正在使用<clipPath>and -webkit-clip-path。div 包含两个相互叠加的.holder元素，具有相同的文本，一个是白色的，一个是灰色的，然后clip-path应用于后者。
问题是我需要<path>坐标与文本大小成比例。这是一个小提琴演示。
我试过设置 a
viewBox="0 0 100 100"，它不起作用。我也尝试过使用
clipPathUnits="objectBoundingBox"，但在这种情况下似乎不起作用，我猜是因为文本是display:inline.
现在，如果这些看起来太复杂而无法分析，并且您了解基本概念并愿意按照自己的方式去做，那就去做吧，我现在非常愿意接受建议。
另外，我试图避免使用 JavaScript 来执行此操作，但如果必须这样做，请继续，没问题 :)
这是原始代码：
HTML
<div class="container">
<div class="holder">
<div class="back">Text</div>
<div class="front">Text</div>
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<clipPath id="path">
<path fill="transparent" stroke="black" >
<animate
attributeName="d"
attributeType="XML"
values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z"
begin="0s"
dur="1s"
fill="freeze"
repeatCount="indefinite"
direction="alternate" />
</path>
</clipPath>
</svg>
</div>
</div>
该<animate>元素只是在两条路径之间交替，以产生“波浪”效果。
CSS
.container {
display:inline-block;
padding:2.5% 5%;
background:lightcoral;
}
.holder {
position:relative;
text-align:center;
font:6em impact;
color:white;
text-transform:uppercase;
}
.front {
position:absolute;
top:0;
color:gray;
opacity:.3;
-webkit-clip-path:url(#path);
}
svg {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
这是我的 css，不是很完美，请随意撕开它！
提前致谢！