在滚动上绘制 SVG 线条持续时间
Draw SVG lines duration on scroll
我在绘制 SVG 形状时遇到问题。我尝试使用 Magic Scroll，但不幸的是我放弃了这个想法来制作一个 SVG 绘图。
如何在没有 Scroll Magic 的情况下实现绘制 1000 像素滚动的 SVG 线条？
.draw-svg {
position: fixed;
}
.draw-svg svg{
max-height: 250px;
}
.fixed-scroll {
position: absolute;
bottom: 0;
width: 1000px;
height: 30px;
background: green;
}
.fixed-scroll {
font-size: 18px;
color: white;
}
<div class="draw-svg">
<svg width="424px" height="422px" viewBox="0 0 424 422" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>quadro</title>
<defs>
<linearGradient x1="5.30621473%" y1="98.1201798%" x2="9.45936593%" y2="-101.005717%" id="linearGradient-1">
<stop stop-color="#CE008E" offset="0%"></stop>
<stop stop-color="#3313BA" offset="41.1458%"></stop>
<stop stop-color="#3313BA" stop-opacity="0" offset="86.3949%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quadro" transform="translate(0.844802, 0.582916)">
<line x1="211.155198" y1="13.417084" x2="211.156198" y2="213.417084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="211.155198" y1="213.417084" x2="211.156198" y2="413.417084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="410.905198" y1="213.417084" x2="210.905198" y2="213.418084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="210.905198" y1="213.417084" x2="10.9051982" y2="213.418084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<path d="M11.9045782,214.459084 L10.8622982,213.417084 L11.9045882,212.375084 L11.5510382,212.021084 L14.3426982,209.230084 L14.6962982,209.583084 L17.4878982,206.792084 L17.1343982,206.438084 L19.9259982,203.646084 L20.2795982,204.000084 L23.0712982,201.208084 L22.7176982,200.855084 L25.5093982,198.063084 L25.8628982,198.416084 L28.6545982,195.625084 L28.3009982,195.271084 L31.0926982,192.480084 L31.4462982,192.833084 L34.2378982,190.041084 L33.8843982,189.688084 L36.6760982,186.896084 L37.0295982,187.250084 L39.8212982,184.458084 L39.4676982,184.105084 L42.2593982,181.313084 L42.6128982,181.666084 L45.4045982,178.875084 L45.0510982,178.521084 L47.8426982,175.730084 L48.1962982,176.083084 L50.9879982,173.291084 L50.6343982,172.938084 L53.4260982,170.146084 L53.7795982,170.500084 L56.5712982,167.708084 L56.2176982,167.355084 L59.0093982,164.563084 L59.3629982,164.916084 L62.1545982,162.125084 L61.8010982,161.771084 L64.5926982,158.980084 L64.9462982,159.333084 L67.7379982,156.541084 L67.3843982,156.188084 L70.1760982,153.396084 L70.5295982,153.750084 L73.3212982,150.958084 L72.9676982,150.605084 L75.7593982,147.813084 L76.1129982,148.166084 L78.9045982,145.375084 L78.5510982,145.021084 L81.3426982,142.230084 L81.6962982,142.583084 L84.4879982,139.791084 L84.1343982,139.438084 L86.9260982,136.646084 L87.2795982,137.000084 L90.0712982,134.208084 L89.7176982,133.855084 L92.5093982,131.063084 L92.8629982,131.416084 L95.6545982,128.625084 L95.3010982,128.271084 L98.0926982,125.480084 L98.4462982,125.833084 L101.237998,123.041084 L100.884398,122.688084 L103.676198,119.896084 L104.029198,120.250084 L106.821198,117.458084 L106.468198,117.105084 L109.259198,114.313084 L109.613198,114.666084 L112.404198,111.875084 L112.051198,111.521084 L114.843198,108.730084 L115.196198,109.083084 L117.988198,106.291084 L117.634198,105.938084 L120.426198,103.146084 L120.779198,103.500084 L123.571198,100.708084 L123.218198,100.355084 L126.009198,97.562984 L126.363198,97.916584 L129.154198,95.124884 L128.801198,94.771284 L131.593198,91.979684 L131.946198,92.333184 L134.738198,89.541584 L134.384198,89.187984 L137.176198,86.396284 L137.529198,86.749884 L140.321198,83.958184 L139.968198,83.604684 L142.759198,80.812984 L143.113198,81.166584 L145.904198,78.374884 L145.551198,78.021284 L148.343198,75.229684 L148.696198,75.583184 L151.488198,72.791584 L151.134198,72.437984 L153.926198,69.646284 L154.279198,69.999884 L157.071198,67.208184 L156.718198,66.854684 L159.509198,64.062984 L159.863198,64.416584 L162.654198,61.624884 L162.301198,61.271284 L165.093198,58.479684 L165.446198,58.833184 L168.238198,56.041584 L167.884198,55.687984 L170.676198,52.896284 L171.029198,53.249884 L173.821198,50.458184 L173.468198,50.104684 L176.259198,47.312984 L176.613198,47.666584 L179.404198,44.874884 L179.051198,44.521284 L181.843198,41.729684 L182.196198,42.083184 L184.988198,39.291584 L184.634198,38.937984 L187.426198,36.146284 L187.779198,36.499884 L190.571198,33.708184 L190.218198,33.354684 L193.009198,30.562984 L193.363198,30.916484 L196.154198,28.124884 L195.801198,27.771284 L198.593198,24.979584 L198.946198,25.333184 L201.738198,22.541484 L201.384198,22.187984 L204.176198,19.396284 L204.529198,19.749784 L207.321198,16.958184 L206.968198,16.604584 L209.759198,13.812884 L210.113198,14.166484 L211.155198,13.124184 L212.197198,14.166484 L212.551198,13.812884 L215.343198,16.604584 L214.989198,16.958184 L217.781198,19.749784 L218.134198,19.396284 L220.926198,22.187884 L220.572198,22.541484 L223.364198,25.333184 L223.718198,24.979584 L226.509198,27.771284 L226.156198,28.124784 L228.947198,30.916484 L229.301198,30.562884 L232.093198,33.354584 L231.739198,33.708184 L234.531198,36.499784 L234.884198,36.146284 L237.676198,38.937984 L237.322198,39.291484 L240.114198,42.083184 L240.468198,41.729584 L243.259198,44.521284 L242.906198,44.874784 L245.697198,47.666484 L246.051198,47.312984 L248.843198,50.104584 L248.489198,50.458184 L251.281198,53.249884 L251.634198,52.896284 L254.426198,55.687984 L254.072198,56.041484 L256.864198,58.833184 L257.218198,58.479584 L260.009198,61.271284 L259.656198,61.624884 L262.447198,64.416484 L262.801198,64.062984 L265.593198,66.854584 L265.239198,67.208184 L268.031198,69.999884 L268.384198,69.646284 L271.176198,72.437984 L270.822198,72.791484 L273.614198,75.583184 L273.968198,75.229584 L276.759198,78.021284 L276.406198,78.374884 L279.197198,81.166484 L279.551198,80.812984 L282.343198,83.604584 L281.989198,83.958184 L284.781198,86.749884 L285.134198,86.396284 L287.926198,89.187984 L287.572198,89.541484 L290.364198,92.333184 L290.718198,91.979584 L293.509198,94.771284 L293.156198,95.124884 L295.947198,97.916484 L296.301198,97.562984 L299.093198,100.355084 L298.739198,100.708084 L301.531198,103.500084 L301.884198,103.146084 L304.676198,105.938084 L304.322198,106.291084 L307.114198,109.083084 L307.468198,108.730084 L310.259198,111.521084 L309.906198,111.875084 L312.697198,114.666084 L313.051198,114.313084 L315.843198,117.105084 L315.489198,117.458084 L318.281198,120.250084 L318.634198,119.896084 L321.426198,122.688084 L321.072198,123.041084 L323.864198,125.833084 L324.218198,125.480084 L327.009198,128.271084 L326.656198,128.625084 L329.447198,131.416084 L329.801198,131.063084 L332.593198,133.855084 L332.239198,134.208084 L335.031198,137.000084 L335.384198,136.646084 L338.176198,139.438084 L337.822198,139.791084 L340.614198,142.583084 L340.968198,142.230084 L343.759198,145.021084 L343.406198,145.375084 L346.197198,148.166084 L346.551198,147.813084 L349.343198,150.605084 L348.989198,150.958084 L351.781198,153.750084 L352.134198,153.396084 L354.926198,156.188084 L354.572198,156.541084 L357.364198,159.333084 L357.718198,158.980084 L360.509198,161.771084 L360.156198,162.125084 L362.947198,164.916084 L363.301198,164.563084 L366.093198,167.355084 L365.739198,167.708084 L368.531198,170.500084 L368.884198,170.146084 L371.676198,172.938084 L371.322198,173.291084 L374.114198,176.083084 L374.468198,175.730084 L377.259198,178.521084 L376.906198,178.875084 L379.697198,181.666084 L380.051198,181.313084 L382.843198,184.105084 L382.489198,184.458084 L385.281198,187.250084 L385.634198,186.896084 L388.426198,189.688084 L388.072198,190.041084 L390.864198,192.833084 L391.218198,192.480084 L394.009198,195.271084 L393.656198,195.625084 L396.447198,198.416084 L396.801198,198.063084 L399.593198,200.855084 L399.239198,201.208084 L402.031198,204.000084 L402.384198,203.646084 L405.176198,206.438084 L404.823198,206.791084 L407.614198,209.583084 L407.968198,209.230084 L410.759198,212.021084 L410.406198,212.375084 L411.448198,213.417084 L410.406198,214.459084 L410.759198,214.813084 L407.968198,217.605084 L407.614198,217.251084 L404.823198,220.043084 L405.176198,220.396084 L402.384198,223.188084 L402.031198,222.834084 L399.239198,225.626084 L399.593198,225.980084 L396.801198,228.771084 L396.448198,228.418084 L393.656198,231.209084 L394.009198,231.563084 L391.218198,234.355084 L390.864198,234.001084 L388.073198,236.793084 L388.426198,237.146084 L385.634198,239.938084 L385.281198,239.584084 L382.489198,242.376084 L382.843198,242.730084 L380.051198,245.521084 L379.698198,245.168084 L376.906198,247.959084 L377.259198,248.313084 L374.468198,251.105084 L374.114198,250.751084 L371.322198,253.543084 L371.676198,253.896084 L368.884198,256.688084 L368.531198,256.334084 L365.739198,259.126084 L366.093198,259.480084 L363.301198,262.271084 L362.947198,261.918084 L360.156198,264.709084 L360.509198,265.063084 L357.718198,267.855084 L357.364198,267.501084 L354.572198,270.293084 L354.926198,270.646084 L352.134198,273.438084 L351.781198,273.084084 L348.989198,275.876084 L349.343198,276.230084 L346.551198,279.021084 L346.197198,278.668084 L343.406198,281.459084 L343.759198,281.813084 L340.968198,284.605084 L340.614198,284.251084 L337.822198,287.043084 L338.176198,287.396084 L335.384198,290.188084 L335.031198,289.834084 L332.239198,292.626084 L332.593198,292.980084 L329.801198,295.771084 L329.447198,295.418084 L326.656198,298.209084 L327.009198,298.563084 L324.218198,301.355084 L323.864198,301.001084 L321.072198,303.793084 L321.426198,304.146084 L318.634198,306.938084 L318.281198,306.584084 L315.489198,309.376084 L315.843198,309.730084 L313.051198,312.521084 L312.697198,312.168084 L309.906198,314.959084 L310.259198,315.313084 L307.468198,318.105084 L307.114198,317.751084 L304.322198,320.543084 L304.676198,320.896084 L301.884198,323.688084 L301.531198,323.334084 L298.739198,326.126084 L299.093198,326.480084 L296.301198,329.271084 L295.947198,328.918084 L293.156198,331.709084 L293.509198,332.063084 L290.718198,334.855084 L290.364198,334.501084 L287.572198,337.293084 L287.926198,337.646084 L285.134198,340.438084 L284.781198,340.084084 L281.989198,342.876084 L282.343198,343.230084 L279.551198,346.021084 L279.197198,345.668084 L276.406198,348.459084 L276.759198,348.813084 L273.968198,351.605084 L273.614198,351.251084 L270.822198,354.043084 L271.176198,354.396084 L268.384198,357.188084 L268.031198,356.834084 L265.239198,359.626084 L265.593198,359.980084 L262.801198,362.771084 L262.447198,362.418084 L259.656198,365.209084 L260.009198,365.563084 L257.218198,368.355084 L256.864198,368.001084 L254.072198,370.793084 L254.426198,371.146084 L251.634198,373.938084 L251.281198,373.584084 L248.489198,376.376084 L248.843198,376.730084 L246.051198,379.521084 L245.697198,379.168084 L242.906198,381.959084 L243.259198,382.313084 L240.468198,385.105084 L240.114198,384.751084 L237.322198,387.543084 L237.676198,387.896084 L234.884198,390.688084 L234.531198,390.334084 L231.739198,393.126084 L232.093198,393.480084 L229.301198,396.271084 L228.947198,395.918084 L226.156198,398.709084 L226.509198,399.063084 L223.718198,401.855084 L223.364198,401.501084 L220.572198,404.293084 L220.926198,404.646084 L218.134198,407.438084 L217.781198,407.085084 L214.989198,409.876084 L215.343198,410.230084 L212.551198,413.021084 L212.197198,412.668084 L211.155198,413.710084 L210.113198,412.668084 L209.759198,413.021084 L206.968198,410.230084 L207.321198,409.876084 L204.530198,407.085084 L204.176198,407.438084 L201.384198,404.646084 L201.738198,404.293084 L198.946198,401.501084 L198.593198,401.855084 L195.801198,399.063084 L196.154198,398.710084 L193.363198,395.918084 L193.009198,396.271084 L190.218198,393.480084 L190.571198,393.126084 L187.779198,390.335084 L187.426198,390.688084 L184.634198,387.896084 L184.988198,387.543084 L182.196198,384.751084 L181.843198,385.105084 L179.051198,382.313084 L179.404198,381.960084 L176.613198,379.168084 L176.259198,379.521084 L173.468198,376.730084 L173.821198,376.376084 L171.029198,373.584084 L170.676198,373.938084 L167.884198,371.146084 L168.238198,370.793084 L165.446198,368.001084 L165.093198,368.355084 L162.301198,365.563084 L162.654198,365.209084 L159.863198,362.418084 L159.509198,362.771084 L156.718198,359.980084 L157.071198,359.626084 L154.279198,356.834084 L153.926198,357.188084 L151.134198,354.396084 L151.488198,354.043084 L148.696198,351.251084 L148.343198,351.605084 L145.551198,348.813084 L145.904198,348.459084 L143.113198,345.668084 L142.759198,346.021084 L139.968198,343.230084 L140.321198,342.876084 L137.529198,340.084084 L137.176198,340.438084 L134.384198,337.646084 L134.738198,337.293084 L131.946198,334.501084 L131.593198,334.855084 L128.801198,332.063084 L129.154198,331.709084 L126.363198,328.918084 L126.009198,329.271084 L123.218198,326.480084 L123.571198,326.126084 L120.779198,323.334084 L120.426198,323.688084 L117.634198,320.896084 L117.988198,320.543084 L115.196198,317.751084 L114.843198,318.105084 L112.051198,315.313084 L112.404198,314.959084 L109.613198,312.168084 L109.259198,312.521084 L106.468198,309.730084 L106.821198,309.376084 L104.029198,306.584084 L103.676198,306.938084 L100.884398,304.146084 L101.237998,303.793084 L98.4462982,301.001084 L98.0927982,301.355084 L95.3010982,298.563084 L95.6546982,298.209084 L92.8629982,295.418084 L92.5093982,295.771084 L89.7177982,292.980084 L90.0712982,292.626084 L87.2796982,289.834084 L86.9260982,290.188084 L84.1343982,287.396084 L84.4879982,287.043084 L81.6962982,284.251084 L81.3427982,284.605084 L78.5510982,281.813084 L78.9046982,281.459084 L76.1129982,278.668084 L75.7593982,279.021084 L72.9677982,276.230084 L73.3212982,275.876084 L70.5296982,273.084084 L70.1760982,273.438084 L67.3843982,270.646084 L67.7379982,270.293084 L64.9462982,267.501084 L64.5927982,267.855084 L61.8010982,265.063084 L62.1546982,264.709084 L59.3629982,261.918084 L59.0093982,262.271084 L56.2177982,259.480084 L56.5712982,259.126084 L53.7796982,256.334084 L53.4260982,256.688084 L50.6343982,253.896084 L50.9879982,253.543084 L48.1962982,250.751084 L47.8427982,251.105084 L45.0510982,248.313084 L45.4046982,247.959084 L42.6129982,245.168084 L42.2593982,245.521084 L39.4677982,242.730084 L39.8212982,242.376084 L37.0296982,239.584084 L36.6760982,239.938084 L33.8843982,237.146084 L34.2379982,236.793084 L31.4462982,234.001084 L31.0927982,234.355084 L28.3010982,231.563084 L28.6545982,231.209084 L25.8629982,228.418084 L25.5093982,228.771084 L22.7176982,225.980084 L23.0712982,225.626084 L20.2795982,222.834084 L19.9260982,223.188084 L17.1343982,220.396084 L17.4878982,220.043084 L14.6962982,217.251084 L14.3426982,217.605084 L11.5510282,214.813084 L11.9045782,214.459084 Z" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></path>
<path d="M207.536198,409.844084 C205.010198,412.395084 205.031198,416.510084 207.582198,419.036084 C210.133198,421.562084 214.248198,421.541084 216.774198,418.990084 L207.536198,409.844084 Z M205.655198,211.417084 L205.655198,217.917084 L218.655198,217.917084 L218.655198,211.417084 L205.655198,211.417084 Z M212.155198,15.417084 L216.693198,10.763384 L205.655198,0 L205.655198,15.417084 L212.155198,15.417084 Z M413.155198,211.417084 L417.774198,215.990084 L422.382198,211.336084 L417.693198,206.763084 L413.155198,211.417084 Z M205.655198,15.417084 L205.655198,211.417084 L218.655198,211.417084 L218.655198,15.417084 L205.655198,15.417084 Z M212.155198,206.917084 L4.15519825,206.917084 C2.75884912,208.088201 1.84967471,208.953839 1.42767501,209.513998 C0.269510376,211.051336 8.52651283e-14,212.481248 8.52651283e-14,213.417084 C8.52651283e-14,214.379005 0.204046554,215.896219 1.42767501,217.493641 C1.83931607,218.031031 2.74849048,218.838845 4.15519825,219.917084 L212.155198,219.917084 L212.155198,206.917084 Z M205.655198,215.417084 L205.655198,414.417084 L218.655198,414.417084 L218.655198,215.417084 L205.655198,215.417084 Z M216.774198,418.990084 L417.774198,215.990084 L408.536198,206.844084 L207.536198,409.844084 L216.774198,418.990084 Z M417.693198,206.763084 L216.693198,10.763384 L207.617198,20.070784 L408.617198,216.071084 L417.693198,206.763084 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
</g>
</g>
</svg>
</div>
<div class="fixed-scroll">
Scroll 1000px
<div>
我想你首先需要找到那条路径的长度，然后你需要通过偏移破折号来隐藏形状，当页面滚动时，偏移破折号与滚动的百分比相同，你可以通过 java 脚本我找到了这个帮助资源：
[1]: https://css-tricks.com/scroll-drawing/
最终编辑以反映评论中关于预期结果的讨论。它现在的工作方式是任何带有滚动溢出的单独容器都可以控制箭头的进度而不是整个页面的溢出。这需要稍微更改标记。
由于所有线路都已连接，因此创建单个 path 会容易得多，我已经在下面的代码中完成了（使用在线工具）。然后是 JavaScript 的位，它使用 getTotalLength 设置 dashoffset 的 CSS 值，并使用 dasharray 最初隐藏笔画。之后，它通过更改 dashoffset.
根据滚动进度计算显示多少
在保留原始样式不变的情况下，嵌入式演示的小 window 显示出一些重叠。当然，这需要在相关环境中有一定的响应能力。
$(function() {
let contain = $('.draw-svg'),
arrow = $('#point path'),
overflow = contain[0].scrollWidth-contain.width(),
extent = arrow[0].getTotalLength();
arrow.css({'stroke-dashoffset': extent, 'stroke-dasharray': extent});
contain.scroll(function() {
let progress = $(this).scrollLeft()/overflow,
offset = progress*extent,
value = Math.max(0, extent-offset);
arrow.css({'stroke-dashoffset': value});
});
});
.draw-svg {
position: relative;
overflow: auto;
/* Just for Whosebug window */
height: 420px;
max-height: calc(100vh - 20px);
}
.fixed-scroll {
width: 1000px;
height: 30px;
position: absolute;
bottom: 0;
font-size: 18px;
color: white;
background: green;
}
#point {
max-height: 250px;
position: fixed;
top: 0;
left: 0;
/* Just for Whosebug window */
pointer-events: none;
}
#point g {
transform: translate(10px, 10px)
}
#point path {
fill: none;
stroke: url(#gradient);
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draw-svg">
<div class="fixed-scroll">Scroll 1000px<div>
</div>
<svg id="point" viewBox="0 0 420 420">
<defs>
<linearGradient id="gradient" x1="5.3%" y1="98.1%" x2="9.5%" y2="-101%">
<stop stop-color="#CE008E" offset="0%"></stop>
<stop stop-color="#3313BA" offset="41.1%"></stop>
<stop stop-color="#3313BA" stop-opacity="0" offset="86.4%"></stop>
</linearGradient>
</defs>
<g>
<path d="m 200 200 v -200 l 200 200 l -200 200 v -200 h -200"/>
</g>
</svg>
我在绘制 SVG 形状时遇到问题。我尝试使用 Magic Scroll，但不幸的是我放弃了这个想法来制作一个 SVG 绘图。
如何在没有 Scroll Magic 的情况下实现绘制 1000 像素滚动的 SVG 线条？
.draw-svg {
position: fixed;
}
.draw-svg svg{
max-height: 250px;
}
.fixed-scroll {
position: absolute;
bottom: 0;
width: 1000px;
height: 30px;
background: green;
}
.fixed-scroll {
font-size: 18px;
color: white;
}
<div class="draw-svg">
<svg width="424px" height="422px" viewBox="0 0 424 422" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>quadro</title>
<defs>
<linearGradient x1="5.30621473%" y1="98.1201798%" x2="9.45936593%" y2="-101.005717%" id="linearGradient-1">
<stop stop-color="#CE008E" offset="0%"></stop>
<stop stop-color="#3313BA" offset="41.1458%"></stop>
<stop stop-color="#3313BA" stop-opacity="0" offset="86.3949%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="quadro" transform="translate(0.844802, 0.582916)">
<line x1="211.155198" y1="13.417084" x2="211.156198" y2="213.417084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="211.155198" y1="213.417084" x2="211.156198" y2="413.417084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="410.905198" y1="213.417084" x2="210.905198" y2="213.418084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<line x1="210.905198" y1="213.417084" x2="10.9051982" y2="213.418084" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></line>
<path d="M11.9045782,214.459084 L10.8622982,213.417084 L11.9045882,212.375084 L11.5510382,212.021084 L14.3426982,209.230084 L14.6962982,209.583084 L17.4878982,206.792084 L17.1343982,206.438084 L19.9259982,203.646084 L20.2795982,204.000084 L23.0712982,201.208084 L22.7176982,200.855084 L25.5093982,198.063084 L25.8628982,198.416084 L28.6545982,195.625084 L28.3009982,195.271084 L31.0926982,192.480084 L31.4462982,192.833084 L34.2378982,190.041084 L33.8843982,189.688084 L36.6760982,186.896084 L37.0295982,187.250084 L39.8212982,184.458084 L39.4676982,184.105084 L42.2593982,181.313084 L42.6128982,181.666084 L45.4045982,178.875084 L45.0510982,178.521084 L47.8426982,175.730084 L48.1962982,176.083084 L50.9879982,173.291084 L50.6343982,172.938084 L53.4260982,170.146084 L53.7795982,170.500084 L56.5712982,167.708084 L56.2176982,167.355084 L59.0093982,164.563084 L59.3629982,164.916084 L62.1545982,162.125084 L61.8010982,161.771084 L64.5926982,158.980084 L64.9462982,159.333084 L67.7379982,156.541084 L67.3843982,156.188084 L70.1760982,153.396084 L70.5295982,153.750084 L73.3212982,150.958084 L72.9676982,150.605084 L75.7593982,147.813084 L76.1129982,148.166084 L78.9045982,145.375084 L78.5510982,145.021084 L81.3426982,142.230084 L81.6962982,142.583084 L84.4879982,139.791084 L84.1343982,139.438084 L86.9260982,136.646084 L87.2795982,137.000084 L90.0712982,134.208084 L89.7176982,133.855084 L92.5093982,131.063084 L92.8629982,131.416084 L95.6545982,128.625084 L95.3010982,128.271084 L98.0926982,125.480084 L98.4462982,125.833084 L101.237998,123.041084 L100.884398,122.688084 L103.676198,119.896084 L104.029198,120.250084 L106.821198,117.458084 L106.468198,117.105084 L109.259198,114.313084 L109.613198,114.666084 L112.404198,111.875084 L112.051198,111.521084 L114.843198,108.730084 L115.196198,109.083084 L117.988198,106.291084 L117.634198,105.938084 L120.426198,103.146084 L120.779198,103.500084 L123.571198,100.708084 L123.218198,100.355084 L126.009198,97.562984 L126.363198,97.916584 L129.154198,95.124884 L128.801198,94.771284 L131.593198,91.979684 L131.946198,92.333184 L134.738198,89.541584 L134.384198,89.187984 L137.176198,86.396284 L137.529198,86.749884 L140.321198,83.958184 L139.968198,83.604684 L142.759198,80.812984 L143.113198,81.166584 L145.904198,78.374884 L145.551198,78.021284 L148.343198,75.229684 L148.696198,75.583184 L151.488198,72.791584 L151.134198,72.437984 L153.926198,69.646284 L154.279198,69.999884 L157.071198,67.208184 L156.718198,66.854684 L159.509198,64.062984 L159.863198,64.416584 L162.654198,61.624884 L162.301198,61.271284 L165.093198,58.479684 L165.446198,58.833184 L168.238198,56.041584 L167.884198,55.687984 L170.676198,52.896284 L171.029198,53.249884 L173.821198,50.458184 L173.468198,50.104684 L176.259198,47.312984 L176.613198,47.666584 L179.404198,44.874884 L179.051198,44.521284 L181.843198,41.729684 L182.196198,42.083184 L184.988198,39.291584 L184.634198,38.937984 L187.426198,36.146284 L187.779198,36.499884 L190.571198,33.708184 L190.218198,33.354684 L193.009198,30.562984 L193.363198,30.916484 L196.154198,28.124884 L195.801198,27.771284 L198.593198,24.979584 L198.946198,25.333184 L201.738198,22.541484 L201.384198,22.187984 L204.176198,19.396284 L204.529198,19.749784 L207.321198,16.958184 L206.968198,16.604584 L209.759198,13.812884 L210.113198,14.166484 L211.155198,13.124184 L212.197198,14.166484 L212.551198,13.812884 L215.343198,16.604584 L214.989198,16.958184 L217.781198,19.749784 L218.134198,19.396284 L220.926198,22.187884 L220.572198,22.541484 L223.364198,25.333184 L223.718198,24.979584 L226.509198,27.771284 L226.156198,28.124784 L228.947198,30.916484 L229.301198,30.562884 L232.093198,33.354584 L231.739198,33.708184 L234.531198,36.499784 L234.884198,36.146284 L237.676198,38.937984 L237.322198,39.291484 L240.114198,42.083184 L240.468198,41.729584 L243.259198,44.521284 L242.906198,44.874784 L245.697198,47.666484 L246.051198,47.312984 L248.843198,50.104584 L248.489198,50.458184 L251.281198,53.249884 L251.634198,52.896284 L254.426198,55.687984 L254.072198,56.041484 L256.864198,58.833184 L257.218198,58.479584 L260.009198,61.271284 L259.656198,61.624884 L262.447198,64.416484 L262.801198,64.062984 L265.593198,66.854584 L265.239198,67.208184 L268.031198,69.999884 L268.384198,69.646284 L271.176198,72.437984 L270.822198,72.791484 L273.614198,75.583184 L273.968198,75.229584 L276.759198,78.021284 L276.406198,78.374884 L279.197198,81.166484 L279.551198,80.812984 L282.343198,83.604584 L281.989198,83.958184 L284.781198,86.749884 L285.134198,86.396284 L287.926198,89.187984 L287.572198,89.541484 L290.364198,92.333184 L290.718198,91.979584 L293.509198,94.771284 L293.156198,95.124884 L295.947198,97.916484 L296.301198,97.562984 L299.093198,100.355084 L298.739198,100.708084 L301.531198,103.500084 L301.884198,103.146084 L304.676198,105.938084 L304.322198,106.291084 L307.114198,109.083084 L307.468198,108.730084 L310.259198,111.521084 L309.906198,111.875084 L312.697198,114.666084 L313.051198,114.313084 L315.843198,117.105084 L315.489198,117.458084 L318.281198,120.250084 L318.634198,119.896084 L321.426198,122.688084 L321.072198,123.041084 L323.864198,125.833084 L324.218198,125.480084 L327.009198,128.271084 L326.656198,128.625084 L329.447198,131.416084 L329.801198,131.063084 L332.593198,133.855084 L332.239198,134.208084 L335.031198,137.000084 L335.384198,136.646084 L338.176198,139.438084 L337.822198,139.791084 L340.614198,142.583084 L340.968198,142.230084 L343.759198,145.021084 L343.406198,145.375084 L346.197198,148.166084 L346.551198,147.813084 L349.343198,150.605084 L348.989198,150.958084 L351.781198,153.750084 L352.134198,153.396084 L354.926198,156.188084 L354.572198,156.541084 L357.364198,159.333084 L357.718198,158.980084 L360.509198,161.771084 L360.156198,162.125084 L362.947198,164.916084 L363.301198,164.563084 L366.093198,167.355084 L365.739198,167.708084 L368.531198,170.500084 L368.884198,170.146084 L371.676198,172.938084 L371.322198,173.291084 L374.114198,176.083084 L374.468198,175.730084 L377.259198,178.521084 L376.906198,178.875084 L379.697198,181.666084 L380.051198,181.313084 L382.843198,184.105084 L382.489198,184.458084 L385.281198,187.250084 L385.634198,186.896084 L388.426198,189.688084 L388.072198,190.041084 L390.864198,192.833084 L391.218198,192.480084 L394.009198,195.271084 L393.656198,195.625084 L396.447198,198.416084 L396.801198,198.063084 L399.593198,200.855084 L399.239198,201.208084 L402.031198,204.000084 L402.384198,203.646084 L405.176198,206.438084 L404.823198,206.791084 L407.614198,209.583084 L407.968198,209.230084 L410.759198,212.021084 L410.406198,212.375084 L411.448198,213.417084 L410.406198,214.459084 L410.759198,214.813084 L407.968198,217.605084 L407.614198,217.251084 L404.823198,220.043084 L405.176198,220.396084 L402.384198,223.188084 L402.031198,222.834084 L399.239198,225.626084 L399.593198,225.980084 L396.801198,228.771084 L396.448198,228.418084 L393.656198,231.209084 L394.009198,231.563084 L391.218198,234.355084 L390.864198,234.001084 L388.073198,236.793084 L388.426198,237.146084 L385.634198,239.938084 L385.281198,239.584084 L382.489198,242.376084 L382.843198,242.730084 L380.051198,245.521084 L379.698198,245.168084 L376.906198,247.959084 L377.259198,248.313084 L374.468198,251.105084 L374.114198,250.751084 L371.322198,253.543084 L371.676198,253.896084 L368.884198,256.688084 L368.531198,256.334084 L365.739198,259.126084 L366.093198,259.480084 L363.301198,262.271084 L362.947198,261.918084 L360.156198,264.709084 L360.509198,265.063084 L357.718198,267.855084 L357.364198,267.501084 L354.572198,270.293084 L354.926198,270.646084 L352.134198,273.438084 L351.781198,273.084084 L348.989198,275.876084 L349.343198,276.230084 L346.551198,279.021084 L346.197198,278.668084 L343.406198,281.459084 L343.759198,281.813084 L340.968198,284.605084 L340.614198,284.251084 L337.822198,287.043084 L338.176198,287.396084 L335.384198,290.188084 L335.031198,289.834084 L332.239198,292.626084 L332.593198,292.980084 L329.801198,295.771084 L329.447198,295.418084 L326.656198,298.209084 L327.009198,298.563084 L324.218198,301.355084 L323.864198,301.001084 L321.072198,303.793084 L321.426198,304.146084 L318.634198,306.938084 L318.281198,306.584084 L315.489198,309.376084 L315.843198,309.730084 L313.051198,312.521084 L312.697198,312.168084 L309.906198,314.959084 L310.259198,315.313084 L307.468198,318.105084 L307.114198,317.751084 L304.322198,320.543084 L304.676198,320.896084 L301.884198,323.688084 L301.531198,323.334084 L298.739198,326.126084 L299.093198,326.480084 L296.301198,329.271084 L295.947198,328.918084 L293.156198,331.709084 L293.509198,332.063084 L290.718198,334.855084 L290.364198,334.501084 L287.572198,337.293084 L287.926198,337.646084 L285.134198,340.438084 L284.781198,340.084084 L281.989198,342.876084 L282.343198,343.230084 L279.551198,346.021084 L279.197198,345.668084 L276.406198,348.459084 L276.759198,348.813084 L273.968198,351.605084 L273.614198,351.251084 L270.822198,354.043084 L271.176198,354.396084 L268.384198,357.188084 L268.031198,356.834084 L265.239198,359.626084 L265.593198,359.980084 L262.801198,362.771084 L262.447198,362.418084 L259.656198,365.209084 L260.009198,365.563084 L257.218198,368.355084 L256.864198,368.001084 L254.072198,370.793084 L254.426198,371.146084 L251.634198,373.938084 L251.281198,373.584084 L248.489198,376.376084 L248.843198,376.730084 L246.051198,379.521084 L245.697198,379.168084 L242.906198,381.959084 L243.259198,382.313084 L240.468198,385.105084 L240.114198,384.751084 L237.322198,387.543084 L237.676198,387.896084 L234.884198,390.688084 L234.531198,390.334084 L231.739198,393.126084 L232.093198,393.480084 L229.301198,396.271084 L228.947198,395.918084 L226.156198,398.709084 L226.509198,399.063084 L223.718198,401.855084 L223.364198,401.501084 L220.572198,404.293084 L220.926198,404.646084 L218.134198,407.438084 L217.781198,407.085084 L214.989198,409.876084 L215.343198,410.230084 L212.551198,413.021084 L212.197198,412.668084 L211.155198,413.710084 L210.113198,412.668084 L209.759198,413.021084 L206.968198,410.230084 L207.321198,409.876084 L204.530198,407.085084 L204.176198,407.438084 L201.384198,404.646084 L201.738198,404.293084 L198.946198,401.501084 L198.593198,401.855084 L195.801198,399.063084 L196.154198,398.710084 L193.363198,395.918084 L193.009198,396.271084 L190.218198,393.480084 L190.571198,393.126084 L187.779198,390.335084 L187.426198,390.688084 L184.634198,387.896084 L184.988198,387.543084 L182.196198,384.751084 L181.843198,385.105084 L179.051198,382.313084 L179.404198,381.960084 L176.613198,379.168084 L176.259198,379.521084 L173.468198,376.730084 L173.821198,376.376084 L171.029198,373.584084 L170.676198,373.938084 L167.884198,371.146084 L168.238198,370.793084 L165.446198,368.001084 L165.093198,368.355084 L162.301198,365.563084 L162.654198,365.209084 L159.863198,362.418084 L159.509198,362.771084 L156.718198,359.980084 L157.071198,359.626084 L154.279198,356.834084 L153.926198,357.188084 L151.134198,354.396084 L151.488198,354.043084 L148.696198,351.251084 L148.343198,351.605084 L145.551198,348.813084 L145.904198,348.459084 L143.113198,345.668084 L142.759198,346.021084 L139.968198,343.230084 L140.321198,342.876084 L137.529198,340.084084 L137.176198,340.438084 L134.384198,337.646084 L134.738198,337.293084 L131.946198,334.501084 L131.593198,334.855084 L128.801198,332.063084 L129.154198,331.709084 L126.363198,328.918084 L126.009198,329.271084 L123.218198,326.480084 L123.571198,326.126084 L120.779198,323.334084 L120.426198,323.688084 L117.634198,320.896084 L117.988198,320.543084 L115.196198,317.751084 L114.843198,318.105084 L112.051198,315.313084 L112.404198,314.959084 L109.613198,312.168084 L109.259198,312.521084 L106.468198,309.730084 L106.821198,309.376084 L104.029198,306.584084 L103.676198,306.938084 L100.884398,304.146084 L101.237998,303.793084 L98.4462982,301.001084 L98.0927982,301.355084 L95.3010982,298.563084 L95.6546982,298.209084 L92.8629982,295.418084 L92.5093982,295.771084 L89.7177982,292.980084 L90.0712982,292.626084 L87.2796982,289.834084 L86.9260982,290.188084 L84.1343982,287.396084 L84.4879982,287.043084 L81.6962982,284.251084 L81.3427982,284.605084 L78.5510982,281.813084 L78.9046982,281.459084 L76.1129982,278.668084 L75.7593982,279.021084 L72.9677982,276.230084 L73.3212982,275.876084 L70.5296982,273.084084 L70.1760982,273.438084 L67.3843982,270.646084 L67.7379982,270.293084 L64.9462982,267.501084 L64.5927982,267.855084 L61.8010982,265.063084 L62.1546982,264.709084 L59.3629982,261.918084 L59.0093982,262.271084 L56.2177982,259.480084 L56.5712982,259.126084 L53.7796982,256.334084 L53.4260982,256.688084 L50.6343982,253.896084 L50.9879982,253.543084 L48.1962982,250.751084 L47.8427982,251.105084 L45.0510982,248.313084 L45.4046982,247.959084 L42.6129982,245.168084 L42.2593982,245.521084 L39.4677982,242.730084 L39.8212982,242.376084 L37.0296982,239.584084 L36.6760982,239.938084 L33.8843982,237.146084 L34.2379982,236.793084 L31.4462982,234.001084 L31.0927982,234.355084 L28.3010982,231.563084 L28.6545982,231.209084 L25.8629982,228.418084 L25.5093982,228.771084 L22.7176982,225.980084 L23.0712982,225.626084 L20.2795982,222.834084 L19.9260982,223.188084 L17.1343982,220.396084 L17.4878982,220.043084 L14.6962982,217.251084 L14.3426982,217.605084 L11.5510282,214.813084 L11.9045782,214.459084 Z" id="Path" stroke="#BDBDBD" stroke-dasharray="4"></path>
<path d="M207.536198,409.844084 C205.010198,412.395084 205.031198,416.510084 207.582198,419.036084 C210.133198,421.562084 214.248198,421.541084 216.774198,418.990084 L207.536198,409.844084 Z M205.655198,211.417084 L205.655198,217.917084 L218.655198,217.917084 L218.655198,211.417084 L205.655198,211.417084 Z M212.155198,15.417084 L216.693198,10.763384 L205.655198,0 L205.655198,15.417084 L212.155198,15.417084 Z M413.155198,211.417084 L417.774198,215.990084 L422.382198,211.336084 L417.693198,206.763084 L413.155198,211.417084 Z M205.655198,15.417084 L205.655198,211.417084 L218.655198,211.417084 L218.655198,15.417084 L205.655198,15.417084 Z M212.155198,206.917084 L4.15519825,206.917084 C2.75884912,208.088201 1.84967471,208.953839 1.42767501,209.513998 C0.269510376,211.051336 8.52651283e-14,212.481248 8.52651283e-14,213.417084 C8.52651283e-14,214.379005 0.204046554,215.896219 1.42767501,217.493641 C1.83931607,218.031031 2.74849048,218.838845 4.15519825,219.917084 L212.155198,219.917084 L212.155198,206.917084 Z M205.655198,215.417084 L205.655198,414.417084 L218.655198,414.417084 L218.655198,215.417084 L205.655198,215.417084 Z M216.774198,418.990084 L417.774198,215.990084 L408.536198,206.844084 L207.536198,409.844084 L216.774198,418.990084 Z M417.693198,206.763084 L216.693198,10.763384 L207.617198,20.070784 L408.617198,216.071084 L417.693198,206.763084 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
</g>
</g>
</svg>
</div>
<div class="fixed-scroll">
Scroll 1000px
<div>
我想你首先需要找到那条路径的长度，然后你需要通过偏移破折号来隐藏形状，当页面滚动时，偏移破折号与滚动的百分比相同，你可以通过 java 脚本我找到了这个帮助资源： [1]: https://css-tricks.com/scroll-drawing/
最终编辑以反映评论中关于预期结果的讨论。它现在的工作方式是任何带有滚动溢出的单独容器都可以控制箭头的进度而不是整个页面的溢出。这需要稍微更改标记。
由于所有线路都已连接，因此创建单个 path 会容易得多，我已经在下面的代码中完成了（使用在线工具）。然后是 JavaScript 的位，它使用 getTotalLength 设置 dashoffset 的 CSS 值，并使用 dasharray 最初隐藏笔画。之后，它通过更改 dashoffset.
在保留原始样式不变的情况下，嵌入式演示的小 window 显示出一些重叠。当然，这需要在相关环境中有一定的响应能力。
$(function() {
let contain = $('.draw-svg'),
arrow = $('#point path'),
overflow = contain[0].scrollWidth-contain.width(),
extent = arrow[0].getTotalLength();
arrow.css({'stroke-dashoffset': extent, 'stroke-dasharray': extent});
contain.scroll(function() {
let progress = $(this).scrollLeft()/overflow,
offset = progress*extent,
value = Math.max(0, extent-offset);
arrow.css({'stroke-dashoffset': value});
});
});
.draw-svg {
position: relative;
overflow: auto;
/* Just for Whosebug window */
height: 420px;
max-height: calc(100vh - 20px);
}
.fixed-scroll {
width: 1000px;
height: 30px;
position: absolute;
bottom: 0;
font-size: 18px;
color: white;
background: green;
}
#point {
max-height: 250px;
position: fixed;
top: 0;
left: 0;
/* Just for Whosebug window */
pointer-events: none;
}
#point g {
transform: translate(10px, 10px)
}
#point path {
fill: none;
stroke: url(#gradient);
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="draw-svg">
<div class="fixed-scroll">Scroll 1000px<div>
</div>
<svg id="point" viewBox="0 0 420 420">
<defs>
<linearGradient id="gradient" x1="5.3%" y1="98.1%" x2="9.5%" y2="-101%">
<stop stop-color="#CE008E" offset="0%"></stop>
<stop stop-color="#3313BA" offset="41.1%"></stop>
<stop stop-color="#3313BA" stop-opacity="0" offset="86.4%"></stop>
</linearGradient>
</defs>
<g>
<path d="m 200 200 v -200 l 200 200 l -200 200 v -200 h -200"/>
</g>
</svg>