如何在 Next JS 中的 Scroll 上绘制 SVG

Question

背景
我一直在阅读所有内容，观看所有内容，但无法完全弄清楚。 我从 FCC 了解 React JS 的基本知识，并且在 Next JS 上学习了大量的 Fireship.io 课程。 任何帮助表示赞赏。

我正在尝试做什么
我有一个 SVG 徽标，我试图在滚动时对其进行动画处理。 我正在尝试遵循本教程： https://www.w3schools.com/howto/howto_js_scrolldrawing.asp ，它是为 Vanilla JS、HTML/CSS 编写的。 我已经用 Vanilla JS 和超文本预处理器创建了一个网站，但现在我正在尝试学习前端框架，因此我在 React 中实现。

似乎是什么问题
我正在使用功能组件，这些文档非常混乱。 显然，您不能将ref关键字与功能组件一起使用，并且必须使用我试图避免的类。

当前工作
这是我目前拥有的：

// Packages to import:
import React from 'react';

export default function Home() {
  // Initialization: 
  var homepage_logo_main_content = React.useRef(); /* So why we can use this but not . notation for font awesome icons? */
  
  // Update value of SVG on scroll to present animation effect:
  function animate_svg_on_scroll(value) {
    var homepage_logo_main_content_total_length = homepage_logo_main_content.current.getTotalLength(); // Getting the total length of the SVG path.
    homepage_logo_main_content.current.style.strokeDasharray = homepage_logo_main_content_total_length; // Get the starting position of the draw.
    homepage_logo_main_content.current.style.strokeDashoffset = homepage_logo_main_content_total_length;
    var draw = homepage_logo_main_content_total_length * value;
  };

  React.useEffect(() => {
    const handleScroll = event => {
      const value = window.scrollY / 1069;
      animate_svg_on_scroll(value);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div className = "homepage_main_div">
      <svg xmlns = "http://www.w3.org/2000/svg" version="1.0" width="400.000000pt" height = "400.000000pt" viewBox = "0 0 400.000000 400.000000" preserveAspectRatio = "xMidYMid meet" className = "homepage_logo">
        <g transform = "translate(0.000000,400.000000) scale(0.100000,-0.100000)" fill = "#000000" stroke = "none">
          <path id = "tiger" ref = {homepage_logo_main_content} d = "M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0 -2000z 2z"/>
          <path d = "M820 2176 c-25 -7 -61 -21 -80 -31 -54 -28 -148 -124 -187 -189 -32 -55 -83 -176 -83 -197 0 -15 265 -10 348 7 190 38 282 121 282 251 0 69 -21 110 -75 143 -45 28 -140 35 -205 16z"/>
          <path d = "M1800 1585 c0 -161 2 -186 16 -192 9 -3 20 0 25 8 5 8 8 93 6 189 -2 173 -2 175 -24 178 l-23 3 0 -186z"/>
        </g>
      </svg>

      <h1> Welcome to this math website </h1>
    </div>
  )
}

Next JS 似乎没有抛出错误，并且网站呈现。 当我滚动时，useEffect 钩子和事件侦听器执行 output Y 滚动 position。 但是， animate_svg_on_scroll中的任何内容似乎都不起作用。

如果 TL;DR，请参阅上面来自 W3 学校的链接，并建议如何在 Next JS 中实施以及观看/阅读哪些资源。 非常感谢你（已经为此工作了几天）。

Answer 1

由于g标签中的stroke="none" ，您的路径未显示。 将其更改为另一种颜色，然后将显示路径

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.0"
    width="400.000000pt"
    height="400.000000pt"
    viewBox="0 0 400.000000 400.000000"
    preserveAspectRatio="xMidYMid meet"
    className="homepage_logo"
  >
    <g
      transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
      fill="none"
      stroke="red"
      stroke-width="20"
    >
      <path
        id="tiger"
        d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0 -2000z 2z"
        ref={homepage_logo_main_content}
      />
      <path d="M820 2176 c-25 -7 -61 -21 -80 -31 -54 -28 -148 -124 -187 -189 -32 -55 -83 -176 -83 -197 0 -15 265 -10 348 7 190 38 282 121 282 251 0 69 -21 110 -75 143 -45 28 -140 35 -205 16z" />
      <path d="M1800 1585 c0 -161 2 -186 16 -192 9 -3 20 0 25 8 5 8 8 93 6 189 -2 173 -2 175 -24 178 l-23 3 0 -186z" />
    </g>
  </svg>

你可以参考我的代码框