svgとjavascriptを使った動的な可動

Question

実現したいこと

サイトのナビゲーション管理で、各セクションにスクロールした際、現在位置を示す白点をナビ左に表示し、
アクテイブからインアクティブになる際、白点が消失時、円が白点の周囲をくるりとまわるような動きを実装したい。
（現在、ナビゲーションが各セクションにスクロールした際、ナビゲーション左横に白点を表示（アクティブ）し、別のセクションに移動した際、白点が消失（インアクティブ）するところまではできており、今後、SVGを使いアクティブからインアクティブに切り替わる際、白点が消失する前に周囲を白い円でくるりと回るようにしたい）

前提

イメージとしてはhttps://gocloudforce.com/
このサイトのような動きを実装したく、svgを仕様しましたが、svgとjsをうまく組み合わせられません。

発生している問題・エラーメッセージ

具体的なエラーが発生しているわけではありませんが、何度挑戦しても白点がそもそもsvgの外に発生してしまい、コードそのものに問題があるのはわかるのですが、JSのコードをいじるとそもそも作動しなくなり
何から手をつけて良いのかわからなくなったので力を貸していただけると助かります。

エラーメッセージ

該当のソースコード

<section id="home">
    <img src="img/logo.svg">
    <nav>
        <a href="index.html#home" data-target="home">
            <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp">
                <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle>
            </svg>Home</a>
        <a href="index.html#about" data-target="about">
            <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp">
                <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle>
            </svg>About</a>
        <a href="index.html#rules" data-target="rules">
            <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp">
                <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle>
            </svg>Rules</a>
        <a href="index.html#manas" data-target="manas">
            <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp">
                <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle>
            </svg>Manas</a>
        <a href="index.html#contact" data-target="contact">
            <svg viewBox="0 0 200 200" width="25px" height="25px" class="circle-wrapper-sp">
                <circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="3" class="circle-animation"></circle>
            </svg>Contact</a>
    </nav>
    <div class="scrolldown"><span>Scroll&nbsp;down</span></div>
</section>

該当のソースコード

$(document).ready(function () {
    // ナビゲーションアクティブ時に白点を表示
    function showNavigationDot() {
        var activeNavItem = $('nav a.active');
    
        if (activeNavItem.length) {
            var dotPosition = activeNavItem.position().left + activeNavItem.outerWidth() / 2;
            $('nav').append('<div class="dot" style="left: ' + dotPosition + 'px;"></div>');
        }
    }

    // ナビゲーションのアクティブな位置を更新
    function updateNavigation() {
        $('nav a').removeClass('active inactive');

        var positions = updateScrollPositions();

        if (positions.scrollPosition >= positions.homePosition && positions.scrollPosition < positions.aboutPosition) {
            $('nav a[data-target="home"]').addClass('active').removeClass('inactive');
        } else if (positions.scrollPosition >= positions.aboutPosition && positions.scrollPosition < positions.rulesPosition) {
            $('nav a[data-target="about"]').addClass('active').removeClass('inactive');
            $('nav a:not([data-target="about"])').addClass('inactive');
        } else if (positions.scrollPosition >= positions.rulesPosition && positions.scrollPosition < positions.manasPosition) {
            $('nav a[data-target="rules"]').addClass('active').removeClass('inactive');
            $('nav a:not([data-target="rules"])').addClass('inactive');
        } else if (positions.scrollPosition >= positions.manasPosition && positions.scrollPosition < positions.contactPosition) {
            $('nav a[data-target="manas"]').addClass('active').removeClass('inactive');
            $('nav a:not([data-target="manas"])').addClass('inactive');
        } else if (positions.scrollPosition >= positions.contactPosition) {
            $('nav a[data-target="contact"]').addClass('active').removeClass('inactive');
            $('nav a:not([data-target="contact"])').addClass('inactive');
        }
    }

該当のソースコード

body #home nav {
  position: fixed;
  top: 70%;
  left: 3.5%;
  display: flex;
  flex-direction: column;
  text-align: left;
  list-style: none;
}

body #home nav a {
  position: relative;
  padding-bottom: 15px;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
}

body #home nav a::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: transparent;
  border-radius: 50%;
  margin-right: 10px;
}

body #home nav a.active {
  color: #ffffff;
  display: block;
}

body #home nav a.active::before {
  background-color: #ffffff;
}

body #home nav a .circle-animation {
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: dashFadeOut 0.5s ease-in-out forwards;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

@keyframes dashFadeOut {
  0% {
    stroke-dashoffset: 314;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
   

試したこと

思いつく限りコードをいじり、最初はsvgを使わずナビゲーションのアクテイブからインアクティブに切り替わる際、白点周囲をくるりとまわる仕様を実行しようとしましたが、うまくいきませんでした。
その際のコードなどは申し訳ありませんがありません。

補足情報（FW/ツールのバージョンなど）

javascriptをまだまだ使いこなせていない為、できるだけ噛み砕いて教えていただけると助かります

Comments

[int32_t]

スタイルシートも開示してください。
問題が再現できるのに足るすべてのソースがないと回答は難しいです。

[退会済みユーザー]

大変申し訳ありません
初めての質問でテンパってしまいうっかりしておりました。
すぐに修正いたしますのでアドバイスいただけるとありがたいです

[int32_t]

updateNavigation() を呼ぶコードがありません。updateScrollPositions() の実装がありません。ので、依然として他者が再現することはできません。

[yambejp]

サンプルのどの仕様を真似たいのかわからないですが
マウスカーソルが大きく開くところですか？
「円が白点の周囲をくるりとまわる」とは異なるように感じます。
またご提示のサンプルだとアンカーの中にsvgを置いているのでなにをトリガーに動作したいかもよくわかりません。
もう少しソースを絞って、希望する動作も図示すると伝わりやすいかもしれません

[退会済みユーザー]

様々なご指摘ありがとうございます。回答も含め見せていただいた所、私の圧倒的な質問力不足、説明不足がわかりました。
時間を割いて色々アドバイスをいただいた皆様には本当に感謝しております。
しかし、これ以上コードを広く見せると情報開示の制限に引っかかる為、あくまでこのコードを元に推測いただけるとありがたいです。
実装したい具体的な内容についてですが、
現在、ナビゲーションがスクロールと連動しアクティブ時に左横に白点が表示され現在位置を示すところまではできており、それに加え、アクティブからインアクティブに切り替わる際、SVGを使って、白点が消える前に白点周囲をぐるりと円を描く仕様を追加したかったのです。

ただ、SVGをはじめて使った為、使用法がわからず、助けを求め殴り書きしてしまいました。
なにかしらヒントをいただけるととてもありがたいです。
情報不足で申し訳ありませんが引き続きご協力いただけると助かります

[yambejp]

ソースが出せないのはそういう事情もあるでしょうから仕方ありませんが
前回も書きましたが手書きでいいので図示してください

Answer 1

質問の主旨がよくわからないのでサークルにhoverしたとき回転して消えるCSS

<style>
.circle-animation{
stroke-dasharray: 20;
}
.circle-animation:hover {
animation: dashFadeOut linear 2s forwards;
}
@keyframes dashFadeOut {
  0% {
    stroke-dashoffset: 314;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
</style>
<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp">
<rect width="200" height="200" fill="red" />
<circle cx="100" cy="100" r="50" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" />
</svg>

調整版

別の所をクリックしたときにアクティブが外れる処理って感じですかね？
一応ざっと入れておきました

<style>
.circle-animation.leave {
animation: dashFadeOut linear 2s forwards;
}
@keyframes dashFadeOut {
  0% {
    stroke-dashoffset: 314;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.circle-wrapper-sp.active .circle-animation{
  r:10px;
  fill:white;
}
.circle-wrapper-sp:not(.leave) .circle{
opacity:0;
}
.circle-wrapper-sp{
transform: rotate(-90deg);
}
.circle-wrapper-sp.leave .circle{
animation: circle 1s forwards;
}

@keyframes circle {
  0% { stroke-dasharray: 0 502; opacity:1; }
  50% {  opacity:1; }
  99.9%,to { stroke-dasharray:  502  502; opacity:0;}
}
</style>
<script>
document.addEventListener('animationend',({target})=>{
  const c=target.closest('.leave')?.classList;
  if(target.matches('.circle') && c){
    c.remove('leave');
    c.remove('active');
  }
});
document.addEventListener('click',({target})=>{
  const c1=target.closest('.circle-wrapper-sp:not(.active,.leave)')?.classList;
  const c2=document.querySelector('.circle-wrapper-sp.active')?.classList;
  if(c1){
    if(c2) c2.add('leave');
    c1.add('active');
  }
});

</script>
<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp">
<rect width="200" height="200" fill="red" />
<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" />
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" />
</svg>
<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp">
<rect width="200" height="200" fill="red" />
<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" />
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" />
</svg>
<svg viewBox="0 0 200 200" width=100 height=100 class="circle-wrapper-sp">
<rect width="200" height="200" fill="red" />
<circle cx="100" cy="100" r="5" fill="transparent" stroke="#fff" stroke-width="10" class="circle-animation" />
<circle cx="100" cy="100" r="80" fill="transparent" stroke="#fff" stroke-width="10" class="circle" />
</svg>

Comments

[退会済みユーザー]

ありがとうございます。こちらの聞き方が悪かったせいで行いたい実装内容と異なるものとなりましたが、
別の場所で実装したかった内容だったので参考にさせていただきました。

[yambejp]

改めてこういうことかなというものを上げておきました。

Answer 2

(コードが不完全なので憶測になりますが)

$('nav').append('<div class="dot" style="left: ' + dotPosition + 'px;"></div>');

dot クラスのスタイルに position プロパティの設定がないのかもしれません。left プロパティは position: absolute、position: fixed、position: relative などのときのみ有効です。

Comments

[退会済みユーザー]

ありがとうございます。こちらの情報開示不足、伝達能力不足により混乱させてしまい申し訳ありません
貴重なご意見参考にさせていただきます