svg要素に対してsvgでマスクしてループアニメーションしたい

Question

![

マスクされる要素

    <svg width="399" height="77" viewBox="-855 -699 399 77" xmlns="http://www.w3.org/2000/svg">
    <path d="M-854.84-696.8h25.376l15.6 25.584 15.6-25.584h25.376v72.8h-24.232v-36.088l-16.744 25.896h-.416l-16.744-25.896V-624h-23.816v-72.8zm128.44 52.832c2.288011 0 4.367991-.450662 6.24-1.352 1.872009-.901338 3.46666-2.097326 4.784-3.588 1.31734-1.490674 2.322663-3.206657 3.016-5.148.693337-1.941343 1.04-3.986656 1.04-6.136v-.208c0-2.149344-.363996-4.21199-1.092-6.188-.728004-1.97601-1.75066-3.726659-3.068-5.252-1.31734-1.525341-2.911991-2.738662-4.784-3.64-1.872009-.901338-3.986655-1.352-6.344-1.352-2.288011 0-4.367991.450662-6.24 1.352-1.872009.901338-3.46666 2.097326-4.784 3.588-1.31734 1.490674-2.322663 3.206657-3.016 5.148-.693337 1.941343-1.04 3.986656-1.04 6.136v.208c0 2.149344.363996 4.21199 1.092 6.188.728004 1.97601 1.75066 3.726659 3.068 5.252 1.31734 1.525341 2.911991 2.738662 4.784 3.64 1.872009.901338 3.986655 1.352 6.344 1.352zm-.208 21.528c-5.616028 0-10.833309-.970657-15.652-2.912-4.818691-1.941343-9.013315-4.61065-12.584-8.008-3.570685-3.39735-6.361323-7.40131-8.372-12.012-2.010677-4.61069-3.016-9.55064-3.016-14.82v-.208c0-5.26936 1.022656-10.20931 3.068-14.82s4.853315-8.631983 8.424-12.064c3.570685-3.432017 7.782642-6.13599 12.636-8.112 4.853358-1.97601 10.087972-2.964 15.704-2.964s10.833309.970657 15.652 2.912c4.818691 1.941343 9.013315 4.61065 12.584 8.008 3.570685 3.39735 6.361323 7.40131 8.372 12.012 2.010677 4.61069 3.016 9.55064 3.016 14.82v.208c0 5.26936-1.022656 10.20931-3.068 14.82s-4.853315 8.631983-8.424 12.064c-3.570685 3.432017-7.782642 6.13599-12.636 8.112-4.853358 1.97601-10.087972 2.964-15.704 2.964zm46.488-74.36h22.776l25.896 32.136V-696.8h24.128v72.8h-21.632l-27.04-33.592V-624h-24.128v-72.8zm81.12 0h62.088v19.968h-38.168v7.384h35.568v17.576h-35.568v7.904h38.688V-624H-599v-72.8zm90.792 47.008l-27.456-47.008h27.248l12.48 23.92 12.584-23.92h26.936l-27.456 46.696V-624h-24.336v-25.792z" fill-rule="evenodd"/>
    </svg>

マスク

    <svg width="420" height="63" viewBox="-877 -350 420 63" xmlns="http://www.w3.org/2000/svg">
    <g fill="#C6C6C6" fill-rule="evenodd">
    <path d="M-877-350h36v52h-36zM-807-350h36v52h-36zM-737-350h36v52h-36zM-667-350h36v52h-36zM-597-350h36v52h-36zM-527-350h36v52h-36z"/>
    <path d="M-843-339h36v52h-36zM-773-339h36v52h-36zM-703-339h36v52h-36zM-633-339h36v52h-36zM-563-339h36v52h-36zM-493-339h36v52h-36z"/>
    </g>
    </svg>

添付の画像のように
文字（SVG要素）に対して凹凸要素（svg）でマスクしたいです。
また、そのマスクした要素だけ横移動（ループ）したいです。

マスクされる要素をsvgにしているのはcssでfillを変更したい為です。

よろしくお願い致します。

Answer 1

SVGのAnimationタグで行けそうな気がします。

とは言いつつも、SVGでゴリゴリアニメーションを書いていたのがもう2年前なので、具体例をここでさくっとコーディングできません。申し訳ございません。

代わりと言ってはなんですが、自分のgithubに昔「全部SVGで構築した昔のFlashだけで構築したようなページを作ろうとした残骸（FullSVGWebPage/menu_item at master · manzyun/FullSVGWebPage）」が残っているので、それを参考にしつつ、それとsvg要素の基本的な使い方まとめを一読すると、実現できるかと思います。