svg 基础上的动画圆笔画不要滚动 position 不适用于移动浏览器

Question

我正在尝试解决我的页面元素在移动浏览器上的显示方式和 function 之间的一些差异，以及它们在桌面浏览器移动预览中的操作方式。

从用户的角度来看，有一个圆形进度条，它的笔划长度是根据匹配的百分比文本填充的。

SVG 的文本在移动设备上不断变化和更新，以位于 svg 中心的页面的百分比来跟踪页面的滚动进度。

但是进度条的动画路径笔划并没有像预期的那样发生变化。

此外，在我的 iPhone 12 上的 Safari 和 Chrome 中，与右侧和底部固定像素指令相关的整个 SVG 元素的固定 position 元素设置不正确。

这是页面https://www.naturalreliefclub.com/magnesium-reviews.html的链接

这是 HTML：

      <svg
        viewbox="0 0 36 36"
        class="circular-chart"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <path
          class="circle-bg"
          d="M18 2.0845
            a 15.9155 15.9155 0 0 1 0 31.831
            a 15.9155 15.9155 0 0 1 0 -31.831"
        />
        <path
          class="circle"
          stroke-dasharray="0, 100"
          d="M18 2.0845
            a 15.9155 15.9155 0 0 1 0 31.831
            a 15.9155 15.9155 0 0 1 0 -31.831"
        />
        <text x="20" y="20.35" class="percentage">0%</text>
      </svg>

这是 CSS

  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  width: 100%;
  max-height: 75px;
}

.circle {
  stroke: var(--accent-color);
  will-change: transform;
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

.circle-bg {
  fill: #fff;
  stroke: #eee;
  stroke-width: 3.8;
}


.percentage {
  fill: #666;
  font-family: 'Electrolize', sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}

@keyframes progress {
  0% {
      stroke-dasharray: 0 100;
  }
}

这是JS

//variables for text and stroke-dasharray
let progressSection = document.querySelector('.circular-chart');
let progressBar = document.querySelector('.circle');
let progressNum = document.querySelector('.percentage');
let progressSectionDt = document.querySelector('.circular-chart-dt');
let progressBarDt = document.querySelector('.circle-dt');
let progressNumDt = document.querySelector('.percentage-dt');

//function to change stroke value and text innerHTML into the calculated scroll percentage
function updateProgressBar(){
    progressBar.style.strokeDasharray = `${getScrollPercentage()}, 100`;
    progressBarDt.style.strokeDasharray = `${getScrollPercentage()}, 100`;
    if(Math.round(getScrollPercentage()) <= 100){
      progressNum.innerHTML = `${Math.round(getScrollPercentage())}%`;
      progressNumDt.innerHTML = `${Math.round(getScrollPercentage())}%`;
      requestAnimationFrame(updateProgressBar)
    }else {
      progressNum.innerHTML = `100%`;
      progressNumDt.innerHTML = `100%`;
      requestAnimationFrame(updateProgressBar)
  }
}

//function to return scroll position as percentage of full page height
function getScrollPercentage(){
     return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100)
}

//initial recursive function call updating animations on user scroll
updateProgressBar()

  

Answer 1

svg 位于容器中，如下所示。 距离底部 10px。 您能否尝试将其更改为top: 50%以便在加载页面时查看并固定。 我认为这可能是移动设备上的进度条不在视野范围内。 在桌面上，当我向下滚动时我设法得到它，但最初我找不到它

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 10px;
    bottom: 10px; // change this to `top: 50%`
    z-index: 9;
}