SVG <clipPath> 适合容器并使用 % 单位

Question

所以我一直在尝试为一些不同颜色的文本制作挥动动画，为此我使用了 <clipPath> 和 -webkit-clip-path。 .holder div 包含两个具有相同文本的元素，一个为白色，一个为灰色，clip-path 应用于后者。

问题是我需要 <path> 坐标与文本大小成比例。这里有一个fiddle demo.

我试过设置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，还不够完美，随意拆开！

提前致谢！

Answer 1

我相信，如果您将 clipPath 切换为使用边界框单位，您的运气会更好：

<clipPath clipPathUnits="objectBoundingBox" ... >

那么你所有的剪辑路径坐标都应该定义在 0..1.

范围内

http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

SVG <clipPath> 适合容器并使用 % 单位

SVG <clipPath> fit container and use % unit

html

css

svg

clip-path

HTML

CSS