https://greensock.com/forums/topic/28173-scrolltrigger-motionpath-on-a-fixed-element-with-x-translation/
https://greensock.com/forums/topic/29120-control-the-revealing-process-the-duration-of-the-animation-during-scrolling/
https://greensock.com/forums/topic/29189-scroll-animation-svg-fill-when-onscroll/
https://blog.logrocket.com/how-to-animate-svg-css-tutorial-examples/
https://codepen.io/chriscoyier/pen/NWxpJVx
https://css-tricks.com/guide-svg-animations-smil/
http://www.sweet-web-design.com/wordpress/how-to-animate-svg-on-scrolling/3171/
https://github.com/toFrankie/blog/issues/312 ForeignObject Safari/WebKit 无法正确渲染 <foreignObject> 中的 HTML 元素
https://github.com/bkrem/react-d3-tree/issues/284 ForeignObject safari浏览器下，自定义HTML节点不能正常使用定位
https://github.com/didi/LogicFlow/issues/1173
https://discussions.apple.com/thread/251753724
https://stackoverflow.com/questions/63690664/safari-macos-foreign-object-not-scaled-properly-inside-svg
https://stackoverflow.com/questions/63690664/safari-macos-foreign-object-not-scaled-properly-inside-svg
https://github.com/svgdotjs/svg.js/issues/1058
https://jsfiddle.net/MrJeanJean/hxdptc75/
https://jsfiddle.net/Fuzzy/v1Lbhnjw/
https://jsfiddle.net/MrJeanJean/hxdptc75/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG Scroll Drawing，geovindu,涂聚文，Geovin Du</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style type="text/css">
body {
background: linear-gradient(#a8ff78, #78ffd6);
font-family: 'Didact Gothic', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 1100px;
}
.container {
height: 800px;
}
.svg {
width: 500px;
height: 500px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript">
// Thanks, CSS Tricks, for the guidance! https://css-tricks.com/scroll-drawing/
// getting the length of the svg path
const svg = document.getElementById("svgPath");
const length = svg.getTotalLength();
// start position of the drawing - normal display pre-animation
svg.style.strokeDasharray = length;
// hides the svg before the scrolling starts
svg.style.strokeDashoffset = length;
// offset the svg dash by the same amount as the percentage scrolled
window.addEventListener("scroll", function () {
const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
const draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
svg.style.strokeDashoffset = length - draw;
});
</script>
</head>
<body>
<div class="wrapper">
<h1>SVG Scroll Drawing</h1>
</div>
<div class="container">
<!--SVG from The Noun Project, LSE Deisngs, PH-->
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 920" version="1.1" x="0px" y="0px">
<path fill="none" stroke="black" stroke-width="4" id="svgPath" class="animate" opacity="1.00" d=" M 390.05 144.58 C 403.06 143.38 416.23 145.49 428.55 149.70 C 440.73 154.22 451.73 161.48 461.21 170.31 C 470.40 161.59 481.17 154.52 493.02 149.98 C 505.19 145.68 518.20 143.53 531.11 144.46 C 543.66 145.75 556.02 150.20 566.18 157.75 C 571.90 161.55 576.66 166.55 581.35 171.51 C 588.84 180.02 595.83 189.18 600.33 199.66 C 607.66 216.00 608.88 234.24 608.39 251.91 C 607.82 288.63 597.73 324.78 581.59 357.62 C 575.65 370.48 568.58 382.79 561.00 394.76 C 570.86 402.66 580.60 410.73 590.18 418.97 C 613.66 401.37 639.25 385.81 667.55 377.39 C 681.59 372.78 697.55 371.01 711.54 376.70 C 723.09 382.40 732.41 393.18 735.45 405.81 C 750.07 402.53 765.80 401.65 780.10 406.86 C 792.05 410.82 805.04 417.05 809.74 429.65 C 820.67 424.25 833.44 423.52 845.15 426.58 C 853.35 428.54 861.39 431.29 868.92 435.13 C 875.87 438.52 884.05 440.04 891.65 438.31 C 893.77 436.58 893.71 432.57 896.89 431.83 C 902.02 430.83 906.65 436.15 906.01 441.12 C 906.02 446.70 900.80 450.43 895.91 451.79 C 889.38 453.46 882.48 453.14 875.88 452.15 C 866.27 450.65 858.23 444.67 848.94 442.16 C 841.22 440.03 833.11 437.56 825.06 439.32 C 820.33 440.17 815.94 442.16 811.60 444.13 C 811.17 451.71 808.71 459.58 803.02 464.88 C 798.36 469.39 791.61 473.39 784.95 471.16 C 778.70 468.88 777.11 460.94 779.37 455.26 C 782.58 446.82 790.00 440.94 797.22 435.96 C 793.65 425.98 782.56 422.58 773.47 419.52 C 761.43 415.31 748.48 417.19 736.37 419.97 C 733.66 438.67 723.07 455.57 708.94 467.83 C 699.93 474.96 689.57 481.03 678.09 482.88 C 667.41 484.31 658.24 473.24 659.59 463.02 C 660.61 452.52 667.67 444.00 674.85 436.82 C 687.88 423.85 704.24 414.30 721.92 409.28 C 719.71 401.00 713.86 393.77 706.28 389.81 C 698.06 386.14 688.70 386.64 680.09 388.50 C 650.86 395.37 624.78 411.18 600.59 428.45 C 615.25 441.47 629.03 455.79 639.61 472.38 C 649.30 487.29 653.37 505.35 653.03 523.00 C 653.38 536.05 649.85 548.86 644.80 560.80 C 635.66 578.88 621.95 596.15 602.42 603.44 C 591.51 607.96 579.27 607.89 567.96 605.01 C 554.10 601.23 541.00 594.39 530.34 584.73 C 519.70 574.22 511.84 560.21 510.99 545.06 C 509.45 524.57 517.49 504.92 527.33 487.39 C 540.16 464.22 558.31 444.33 578.80 427.69 C 570.43 420.48 561.81 413.58 553.35 406.48 C 526.86 445.18 497.41 481.71 469.78 519.57 C 481.68 536.58 493.58 553.77 502.24 572.72 C 514.05 599.02 519.96 628.13 518.30 656.96 C 517.53 668.14 515.27 679.16 512.14 689.91 C 508.85 700.16 505.50 710.56 499.58 719.65 C 493.39 729.18 485.73 737.98 476.14 744.20 C 472.36 746.74 468.64 749.41 464.58 751.50 C 462.65 752.47 460.26 752.62 458.29 751.70 C 443.67 744.13 430.75 732.98 422.18 718.81 C 414.42 705.82 410.13 691.11 406.78 676.45 C 401.91 654.04 403.17 630.68 408.20 608.42 C 413.22 585.42 423.14 563.67 435.98 544.01 C 441.19 535.65 447.12 527.70 452.33 519.39 C 443.32 506.58 433.60 494.29 424.25 481.73 C 410.59 464.02 397.39 445.97 384.09 427.99 C 379.08 420.85 373.84 413.86 369.17 406.48 C 360.56 413.45 351.92 420.41 343.60 427.73 C 371.98 450.70 395.68 480.49 407.58 515.32 C 411.71 528.81 413.13 543.56 409.13 557.25 C 404.42 572.32 393.89 585.35 380.44 593.53 C 368.88 600.77 355.74 606.02 342.04 606.93 C 329.91 607.94 317.84 603.74 307.76 597.20 C 294.73 588.61 285.26 575.65 278.14 561.96 C 266.90 538.79 266.59 511.18 275.15 487.11 C 280.86 472.95 290.26 460.64 300.43 449.40 C 307.23 442.09 314.11 434.81 321.78 428.40 C 301.79 414.42 280.96 401.09 257.77 393.08 C 246.68 389.35 234.92 385.58 223.10 387.67 C 211.96 389.24 203.40 398.87 200.33 409.30 C 220.90 415.06 239.74 427.04 253.49 443.40 C 259.04 449.95 263.49 458.24 262.72 467.09 C 261.73 474.30 256.40 481.09 249.15 482.73 C 243.16 483.77 237.36 481.32 231.88 479.23 C 208.01 468.86 189.92 445.74 186.00 419.97 C 180.38 418.85 174.77 417.54 169.03 417.19 C 156.96 416.11 144.94 419.84 134.40 425.50 C 130.08 427.65 126.85 431.42 125.06 435.87 C 132.05 440.70 138.97 446.38 142.65 454.23 C 144.37 458.95 144.77 465.08 140.80 468.82 C 136.91 473.12 130.18 472.23 125.60 469.57 C 116.27 464.77 110.93 454.42 110.71 444.13 C 103.36 440.63 95.22 437.68 86.96 439.03 C 77.48 440.51 68.20 443.38 59.63 447.71 C 49.90 452.70 38.49 454.02 27.78 452.15 C 22.40 451.02 16.42 447.12 16.44 441.02 C 15.98 436.02 20.62 430.50 25.89 431.92 C 28.63 432.95 28.85 436.33 30.63 438.31 C 38.96 440.19 47.81 438.22 55.25 434.24 C 67.34 428.71 80.47 424.42 93.90 424.81 C 100.37 425.16 106.73 426.87 112.56 429.68 C 117.25 416.87 130.62 410.67 142.70 406.70 C 156.88 401.59 172.40 402.68 186.90 405.72 C 189.90 393.60 198.48 383.25 209.39 377.36 C 216.34 373.84 224.28 373.04 231.96 373.23 C 239.47 373.34 246.91 374.77 254.02 377.16 C 282.59 385.55 308.47 401.18 332.12 418.98 C 341.76 410.81 351.39 402.63 361.29 394.77 C 349.28 375.96 339.14 355.97 330.92 335.22 C 320.09 307.82 314.11 278.48 313.83 249.00 C 313.85 236.52 314.27 223.84 317.71 211.76 C 322.13 194.54 332.77 179.58 345.20 167.16 C 356.95 154.78 373.03 146.43 390.05 144.58 M 357.05 175.06 C 349.36 182.55 342.43 190.91 337.25 200.34 C 331.14 211.57 328.62 224.39 327.97 237.06 C 326.53 265.87 331.55 294.81 340.94 322.00 C 349.14 344.32 359.61 365.81 372.31 385.92 C 387.72 373.57 403.11 361.18 418.01 348.20 C 430.08 337.21 442.63 326.48 452.46 313.34 C 447.19 304.64 442.07 295.76 439.00 286.01 C 430.79 263.57 427.57 238.56 434.14 215.30 C 437.34 202.62 444.20 191.23 452.02 180.89 C 449.00 178.25 446.00 175.59 442.77 173.21 C 429.40 163.17 412.62 158.22 395.99 158.10 C 381.52 158.79 367.44 164.98 357.05 175.06 M 470.41 180.86 C 480.50 194.11 488.29 209.46 490.53 226.11 C 493.71 246.09 490.29 266.54 483.47 285.42 C 480.39 295.36 475.29 304.48 469.85 313.30 C 479.18 325.77 490.97 336.07 502.42 346.52 C 517.91 360.08 533.90 373.04 549.99 385.87 C 554.47 378.96 558.47 371.75 562.47 364.56 C 572.18 345.66 580.94 326.14 586.48 305.57 C 591.80 285.85 594.68 265.44 594.72 245.00 C 594.35 232.07 593.17 218.87 588.12 206.82 C 583.07 194.55 574.44 184.15 565.08 174.92 C 552.55 162.83 534.48 156.18 517.11 158.67 C 499.57 160.46 483.01 168.60 470.41 180.86 M 461.21 191.96 C 455.91 199.77 450.74 207.92 448.27 217.12 C 445.95 224.20 444.96 231.63 444.53 239.05 C 443.99 249.70 446.28 260.22 448.74 270.51 C 451.83 280.85 455.33 291.23 461.20 300.37 C 465.70 293.05 469.02 285.09 471.55 276.90 C 477.79 258.19 480.34 237.57 474.45 218.42 C 472.03 208.74 466.73 200.15 461.21 191.96 M 427.56 358.45 C 412.09 371.96 396.15 384.94 379.97 397.60 C 405.67 435.20 433.92 470.98 461.22 507.40 C 488.27 470.81 516.75 435.26 542.33 397.62 C 530.00 388.03 517.96 378.08 505.95 368.10 C 490.30 354.52 474.29 341.07 461.13 324.99 C 451.32 337.43 439.29 347.88 427.56 358.45 M 679.15 452.91 C 676.14 456.43 674.15 460.69 673.19 465.21 C 674.00 466.59 674.88 467.95 675.84 469.25 C 697.88 464.17 715.01 445.46 721.30 424.15 C 705.05 429.81 690.09 439.57 679.15 452.91 M 201.01 424.04 C 206.80 444.28 222.49 461.93 242.81 468.27 C 244.40 468.68 246.68 469.59 247.75 467.77 C 249.37 465.81 248.73 463.18 247.93 461.03 C 245.58 454.68 240.65 449.79 235.92 445.15 C 226.03 435.63 213.83 428.78 201.01 424.04 M 540.23 493.16 C 532.03 507.83 524.66 523.83 524.74 540.98 C 524.85 553.59 530.91 565.53 539.73 574.32 C 548.92 582.57 560.19 588.44 572.13 591.55 C 577.63 592.61 583.36 593.95 588.95 592.64 C 601.89 590.48 613.23 582.41 621.07 572.10 C 632.67 558.12 639.20 540.11 639.27 521.96 C 638.96 507.62 636.07 492.86 628.20 480.66 C 617.90 464.02 603.86 450.15 589.48 437.05 C 570.02 452.73 552.46 471.23 540.23 493.16 M 298.26 474.24 C 293.17 481.97 288.03 490.01 286.16 499.23 C 280.15 520.46 282.91 544.34 294.87 563.04 C 297.75 568.02 301.43 572.48 305.20 576.81 C 313.70 585.95 325.43 592.42 338.02 593.21 C 352.11 592.70 365.58 587.03 376.97 578.95 C 385.88 572.58 392.47 563.17 395.81 552.77 C 399.51 539.88 396.88 526.12 392.08 513.88 C 380.09 483.32 358.47 457.25 332.79 437.12 C 320.25 448.46 308.24 460.54 298.26 474.24 M 461.19 531.60 C 450.15 547.51 439.21 563.67 431.57 581.55 C 424.22 598.48 419.94 616.63 418.16 634.97 C 416.44 649.72 418.28 664.68 421.83 679.03 C 425.69 694.95 431.53 711.04 443.00 723.12 C 448.15 728.93 454.72 733.15 461.20 737.32 C 466.58 733.76 472.08 730.27 476.72 725.75 C 484.37 718.28 490.38 709.14 494.18 699.14 C 501.26 680.42 505.67 660.36 504.62 640.25 C 503.07 619.62 498.64 599.04 490.12 580.12 C 482.53 562.81 471.80 547.16 461.19 531.60 Z"></path></svg>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reveal on Scroll Demo，geovindu,涂聚文，Geovin Du</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style>
/* Force scrolling by pushing the svg down the page http://web.simmons.edu/~grovesd/comm328/demo/svg/animation/reveal-on-scroll-multi.html*/
#sloppy-bear {
position: absolute;
top: 1600px;
}
/* Animate the lines on hover */
#sloppy-bear .animated {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1s ease-in;
}
</style>
</head>
<body>
<h1>Reveal on Scroll with multiple paths animated Demo</h1>
<p>(scroll down)</p>
<div class="svg-image">
<svg id="sloppy-bear" width="448px" height="441px" viewBox="0 0 448 441" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>sloppy-bear</title>
<desc>Created with Sketch.</desc>
<style>
#sloppy-bear path {
stroke: #979797;
stroke-width: 2;
fill: none;
}
</style>
<g>
<path d="M201.433047,86.0936534 C197.093441,64.3956216 202.338807,80.6307488 180.881761,54.1249853 C173.697965,45.2508842 167.384379,35.7009663 160.330474,26.7232698 C159.000377,25.0304192 157.689118,23.1191154 155.763522,22.1563173 C139.885694,14.2174033 141.961377,62.043444 142.062664,63.2588905 C143.546274,81.0622113 162.774689,99.9552499 171.747856,108.928416" id="path-1" stroke="#979797"></path>
<path d="M203.716524,81.5267008 C215.357119,78.1029962 252.850856,63.8828091 269.937336,67.8258431 C274.261957,68.8238326 277.275294,72.9279478 281.354718,74.6762719 C283.457904,75.5776374 288.706964,75.1780895 290.488623,76.9597482 C294.623686,81.094811 295.141775,83.8963771 297.339052,86.0936534 C299.126066,87.8806675 308.756433,92.3760451 308.756433,95.2275586" id="path-2" stroke="#979797"></path>
<path d="M308.756433,95.2275586 C317.501984,68.9909072 305.838962,106.386968 311.039909,33.5736987 C311.282435,30.1783438 314.821032,18.8030933 329.30772,8.45545952 C332.579875,6.11820576 338.767932,-4.81032252 345.292054,3.88850694 C351.068843,11.5908921 352.442494,21.8687633 354.425959,31.2902224 C358.667483,51.4374631 353.141726,42.2783378 349.859006,58.6919379 C348.931432,63.3298094 350.159508,72.4377859 347.57553,76.9597482 C334.134471,100.481602 340.586932,75.5052856 336.158149,102.077987" id="path-3" stroke="#979797"></path>
<path d="M174.031332,108.928416 C161.949051,133.092979 165.248769,154.992763 162.61395,181.999658 C160.211936,206.620304 153.094537,237.633251 151.196569,264.204804 C147.238204,319.621921 146.629616,375.21365 146.629616,430.898573" id="path-4" stroke="#979797"></path>
<path class="revealOnScroll" d="M261.999997,147.747513 C256.201684,145.814742 228.519236,147.747513 223.250001,147.747513 C223.250001,147.747513 185.638397,154.643545 196.866095,191.133563 C198.670799,196.998852 203.255603,201.629103 206,207.117897 C207.076441,209.270779 251.906073,224.03862 252.249999,224.009763 C281.482161,221.55702 294.411199,216.545829 299.622528,195.700515 C300.050864,193.987172 300.189561,167.485479 295.500002,164.259767 C277.877477,152.138114 273.914408,148.968088 265.370384,147.747513" id="path-6" stroke="#979797"></path>
<path class="revealOnScroll" d="M304.18948,113.495369 C300.286035,112.194221 289.377764,107.755798 285.92167,111.211893 C278.784934,118.348629 289.040336,126.91783 295.055575,124.91275 C296.076777,124.57235 297.205536,123.697403 297.339052,122.629274 C297.999922,117.342307 300.435953,110.980603 297.339052,106.64494 C295.126979,103.548038 289.727464,106.64494 285.92167,106.64494" id="path-8" stroke="#979797"></path>
<path class="revealOnScroll" d="M228.740234,167.259766 C225.512928,169.276832 236.490234,189.759766 250.740234,191.259766 C258.500013,192.076585 271.500001,178.904787 270.495118,170.582276 C269.529148,162.582038 231.740234,165.009766 231.740234,165.009766" id="path-9" stroke="#979797"></path>
<path d="M144.34614,300.740425 C123.970285,283.275406 107.066276,278.542449 82.6922803,264.204804 C77.5143315,261.158952 70.6515778,254.032844 64.42447,252.787423 C59.199827,251.742494 53.7463658,253.269807 48.440136,252.787423 C45.3146865,252.503291 42.4203341,250.893209 39.3062308,250.503946 C24.549653,248.659374 -6.41386461,243.501809 2.77061014,271.055233 C3.79181179,274.118838 6.81720134,276.303469 9.62103901,277.905662 C17.6063722,282.468709 26.17453,285.97162 34.7392782,289.323043 C43.7052664,292.831473 53.1750055,294.948518 62.1409937,298.456948 C69.4594077,301.320676 90.7562178,312.740637 100.960091,314.441282 C106.605982,315.382264 114.125582,314.173599 119.227901,316.724759 C125.196939,319.709278 148,333.996094 148,333.996094" id="path-11" stroke="#979797"></path>
<path d="M337,102.996094 C334.370034,131.925717 346.695673,160.476369 347,189.996094 C347.683283,256.274541 338.152559,318.013268 343,384.996094 C344.344989,403.58139 349.666667,421.66276 353,439.996094" id="path-10" stroke="#979797"></path>
<path d="M345,276.996094 C357.292385,252.411324 386.552368,227.356372 412,214.996094 C424.136196,209.10137 433.05366,208.738779 441,219.996094 C450.882575,233.996408 447.092464,252.767377 435,263.996094 C421.238146,276.774958 342,328.996094 342,328.996094" id="path-11" stroke="#979797"></path>
<path class="revealOnScroll" d="M221.700017,113.22683 C217.796572,111.925681 206.888301,107.487259 203.432207,110.943353 C196.295471,118.08009 206.550873,126.649291 212.566112,124.644211 C213.587314,124.303811 214.716072,123.428863 214.849588,122.360735 C215.510459,117.073768 217.94649,110.712063 214.849588,106.376401 C212.637516,103.279499 207.238001,106.376401 203.432207,106.376401" id="path-8" stroke="#979797"></path>
</g>
</svg>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var initAnimations = function() {
var $animatable = $('.revealOnScroll');
$animatable.each( function() {
var pathLength = this.getTotalLength();
this.setAttribute('stroke-dasharray', pathLength+' '+pathLength);
this.setAttribute('stroke-dashoffset', pathLength);
});
}
$(document).ready(function() {
var $window = $(window);
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Is animation showing?
$(".revealOnScroll:not(.animated)").each(function () {
// animation scrolled into view
var $this = $(this);
var offsetTop = $this.offset().top;
// Add the animated class to trigger the animation
if (scrolled + win_height_padded > offsetTop) {
$this.addClass('animated');
}
});
}
initAnimations(); // Start the initiation for the animations
revealOnScroll(); // Call the reavealOnScroll when the page is ready
});
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)