offset-pathを使った動きを、可変させたい

実現したいこと

前提

offset-pathをつかったアニメーションを背景としたときに、
中の要素の量が増えたり減ったりしたら一緒に高さが変わるようにしたいです。
offset-pathを可変させることはできるのでしょうか？

ひょうたんの半分のような曲線のsvgにそって、円を動かしたいと思っています。
曲線のsvgは　preserveAspectRatio="none"　でアスペクト比を無視することで
縦に伸ばすことができました。
このときのpathのd属性値を調べれば可変させられるのではと思ったのですが、

const path = document.getElementById('pathD').querySelector('path').getAttribute('d');
console.log(path);

で調べたところ、可変させる前の元の値が表示されました。

初心者で文章も読みにくく申し訳ないのですが、
何か方法があったりするのでしょうか。
ご教示いただけますと幸いです。よろしくお願いいたします。

該当のソースコード

<section class="sec">
          <div class="bgWrap">
            <div class="bg01-1">
              <svg preserveAspectRatio="none" id="pathD" class="bg01-1_content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282 720" fill="none">
                <path d="M277 0C277 180 5 180 5 360C5 540 277 540 277 720" stroke="white" stroke-width="10" />
              </svg>
            </div>
            <div class="bg01-2">
              <svg preserveAspectRatio="none" class="bg01-2_content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282 720" fill="none">
                <path d="M5.00001 0C4.99996 180 277 180 277 360C277 540 4.99996 540 5.00001 720" stroke="white" stroke-width="10" />
              </svg>
            </div>
          </div>
          <div class="pathBox">
            <div class="pathWrap01">
              <div id="pathD01" class="path _01-1"></div>
            </div>
            <div class="pathWrap01">
              <div class="path _01-2"></div>
            </div>
          </div>
          <h2 class="ttl">100</h2>
</section>

.sec {
  height: 100vh;
  background-color: #ddd;
}
.bgWrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.bg01-1,
.bg01-2 {
  width: 282px;
  height: 100vh;
}
.bg01-1_content,
.bg01-2_content {
  height: 100%;
  width: 282px;
  position: absolute;
  top: 0;
}
.path {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background-color: #ff4e7e;
  animation: move 2s linear infinite;
  position: absolute;
}
.pathBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.pathWrap01 {
  height: 100%;
  width: 272px;
}
.path._01-1 {
  offset-path: path('M273 0C273 180 1 180 1 360C1 540 273 540 273 720');
}
.path._01-2 {
  offset-path: path('M1.00001 0C0.999964 180 273 180 273 360C273 540 0.999964 540 1.00001 720');
}

yambejp

2023/10/24 05:29

> 中の要素の量が増えたり減ったりしたら一緒に高さが変わるようにしたいを詳しく説明してください。できれば図示してもらうと回答が付きやすいと思います

行動規範の内容に同意します

回答1件

ベストアンサー

ひょうたんの半分のような曲線のsvgにそって、円を動かしたい

であればこんな感じ

svg
1<svg preserveAspectRatio="none" id="pathD" class="bg01-1_content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282 720" fill="none" height=300>
2  <rect x=0 y=0 width=282 height=720 fill=lightgray />
3  <path d="M277 0C277 180 5 180 5 360C5 540 277 540 277 720" stroke="white" stroke-width="10" id="target_path" />
4  <circle id="move_circle" cx="0" cy="0" r="50" fill="red">
5    <animateMotion dur="3s" repeatCount="indefinite">
6      <mpath xlink:href="#target_path"></mpath>
7    </animateMotion>
8  </circle>
9</svg>
10