如何在滾動時繪圖

滾動繪圖

使用 SVG 和 JavaScript 在滾動時繪制三角形 - 請注意，它必須是 <path> 元素：

實例

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// 獲取 ID 為 "triangle" 的 <path> 元素
var triangle = document.getElementById("triangle");
// 獲取 <path> 元素的長度
var length = triangle.getTotalLength();
// 繪圖的起始位置（設置虛線模式。這里設置為與路徑長度相同的值，實際上是將整個路徑視為一個“大虛線”。）
triangle.style.strokeDasharray = length;
/* 設置虛線偏移量。初始時設置為路徑長度，使得整個路徑被偏移出視圖，從而隱藏三角形。
隨著滾動，這個偏移量會逐漸減小，從而逐漸顯示出三角形。
刪除這行代碼可以在滾動繪制之前顯示三角形。*/
triangle.style.strokeDashoffset = length;
// 監聽窗口的滾動事件，并在滾動時調用 myFunction 函數。
window.addEventListener("scroll", myFunction);
function myFunction() {
  // 計算滾動百分比 =（當前滾動高度） / （總可滾動高度）
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // 計算應該繪制的長度 = 總長度 * 滾動百分比
  var draw = length * scrollpercent;
  // 當向上滾動時，實際上是反向繪制（從完整到不完整），所以這里用總長度減去應該繪制的長度。
  triangle.style.strokeDashoffset = length - draw;
}
</script>

親自試一試

相關頁面

教程：SVG 教程