[英]How to draw an SVG on Scroll in Next JS
背景
我一直在閱讀所有內容,觀看所有內容,但無法完全弄清楚。 我從 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 中實施以及觀看/閱讀哪些資源。 非常感謝你(已經為此工作了幾天)。
由於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>
你可以參考我的代碼框
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.