svg - SVG 読み込みアニメーション - 結合できますかとと?

Question

SVG ベースのローディング アニメーション、別名「イタチの回転<use>」がありますが、ベース アニメーション (フェード アウト属性) を利用してタグで参照することにより、これをより効率的にコーディングできるかどうか疑問に思っています。

      <defs>
        <line 
            id="bit"
            x1="50" 
            y1="25" 
            x2="50" 
            y2="10"  
            stroke="#000000">
        </line>
    </defs>
<g>
    <use 
            xlink:href="#bit" 
            opacity="0.8"
            transform="rotate(0 50 50)">
            <animate 
                attributeName="opacity"
                values="1;0.2" 
                dur="2.4s" 
                repeatCount="indefinite"
                begin="0.0s" 
            />
        </use>
    </g>

これらの<use>タグは 12 個ありますが、簡潔にするためにここでは省略しました。animation タグでは、属性のみbeginが毎回変更され、残りは同じです。

私にとって妥当と思われるさまざまなアプローチを試してみましたが、どれもうまくいきませんでした. それとも、基本的に各タグですべてのアニメーション属性を繰り返さなければならないのでしょうか?

SVG について少し知っているだけで、同じ結果を得る方法がたくさんあることに気づきました。

ありがとう。

--> フィドル