html - SVGコンテナに合わせて % 単位を使用

Question

だから私は別の色のいくつかのテキストの手を振っているアニメーションを作ろうとしてきまし<clipPath>た-webkit-clip-path。.holderdiv には、同じテキストを持つ 2 つの要素が重なり合って含まれています。1 つは白、もう 1 つは灰色で、後者に適用clip-pathされます。

問題は、<path>座標をテキストのサイズに比例させる必要があることです。ここにフィドルのデモがあります。

• を設定しようとしましたが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>要素は、2 つのパスを交互に繰り返すだけで、「波」効果を生み出します。

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 で、ほぼ完璧ではありません。自由に引き裂いてください。

前もって感謝します！