javascript - SVG を使用したロゴの半円のアニメーション

Question

このグラフィックをSVGで作成したいと思います。タグを使用<animate>でき、JavaScript で SVG ドキュメントを操作できます。可能であれば、すべて SVG で行うことをお勧めします。

Answer 1

私を正しい方向に向けてくれた@helderdarochaに心から感謝します。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144">

    <defs>
        <clipPath id="rotation-top" clip-path="url(#top-half)">
            <rect x="0" y="72" height="72" width="144">
                <animateTransform attributeName="transform" 
                    attributeType="XML"
                    type="rotate" 
                    from="360 72 72" 
                    to="0 72 72" 
                    dur="3s"
                    repeatCount="indefinite">
                </animateTransform>
            </rect>
        </clipPath>
        <clipPath id="rotation-bottom" clip-path="url(#bottom-half)">
            <rect x="0" y="0" height="72" width="144">
                <animateTransform attributeName="transform" 
                    attributeType="XML"
                    type="rotate" 
                    from="360 72 72" 
                    to="0 72 72" 
                    dur="3s"
                    repeatCount="indefinite">
                </animateTransform>
            </rect>
        </clipPath>
        <clipPath id="top-half">
            <rect x="0" y="0" height="72" width="144">
            </rect>
        </clipPath>
        <clipPath id="bottom-half">
            <rect x="0" y="72" height="72" width="144">
            </rect>
        </clipPath>
    </defs>

    <!-- background white -->
    <circle opacity="0.56" fill="#FFFFFF" cx="72" cy="72" r="72"/>

    <!-- back gray color -->
    <circle cx="72" cy="72" r="49" stroke-width="6" stroke="#838588" fill-opacity="0.0"/>

    <!-- foreground orange color --> 
    <circle 
        cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#F68524" fill-opacity="0.0" 
        clip-path="url(#rotation-bottom)"
    />

    <circle 
        cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#F68524" fill-opacity="0.0" 
        clip-path="url(#rotation-top)"
    />

</svg>