SVGアニメーションサークルからラインへ

Question

サークルを線（パス）にシェイプしたいと思います。
これは可能ですか？

多分私はGoogleの問題かもしれない方法です。上部と下部が一緒に来れば

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"> 
 
    <title>circle</title> 
 
    <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/> 
 
</svg>

（私にとっては）最良の方法は次のようになります。
しかし、私はこれを行う方法にもっと興味があります！ svg要素をどのように形作るかについては何も見つかりませんでした

---------スモールアップデート----------
ただ見つけたthis。私の方向性を助けるかもしれない。

---------スモールアップデート----------
私はJQueryを使わずにこれを実行しようとしましたが、動作しないと思います。 私のJQueryが嫌なのでthsiの理由は... 誰かがJQueryの修正を手伝ってくれますか？

Answer 1

あなたは円の中心に変革原点を保持するために翻訳し-Yラインにとのために円を変換するために垂直スケールのためanimateTransform方法を使用することができます

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"> 
 
    <title>circle</title> 
 
    <g> 
 
    <circle cx="47.64" cy="47.64" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"> 
 
    <animateTransform attributeName="transform" 
 
    type="scale" 
 
    from="1 1" 
 
    to="1 0" 
 
    begin="0s" 
 
    dur="2s" 
 
    repeatCount="indefinite" 
 
    /> 
 
    </circle> 
 
<animateTransform attributeName="transform" 
 
    type="translate" 
 
    from="0 0" 
 
    to="0 24" 
 
    begin="0s" 
 
    dur="2s" 
 
    repeatCount="indefinite" 
 
    /> 
 
    </g> 
 
</svg>

生活の中で時々

Answer 2

ますすべてを忘れてはならない。
答えは本当にシンプルでしたが、ちょうど難しいと思っていました。

単純なscale()がそのトリックをしました。

.container{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
} \t 
 
\t 
 
@keyframes shapeshifter { 
 
\t 0% { 
 
\t \t transform: scale(1,1); 
 
\t \t transform-origin: 50% 50%; 
 
\t } \t 
 
\t 100% { 
 
\t \t transform: scale(1,0.01); 
 
\t \t transform-origin: 50% 50%; 
 
\t } \t 
 
} 
 
.shape{ 
 
\t animation: shapeshifter 1s ease-in-out 1 both; 
 
}

<div class="container"> 
 
\t <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
    <title>circle</title> 
 
    <circle class="shape" cx="50.109" cy="50.086" r="47.14" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/> 
 
</svg> 
 
</div>