<分区>
标签 javascript jquery css svg
<分区>
我只想在 SVG 处于 View 中时显示动画 CSS，当我滚动回到该元素时，它会重新开始。我找到了一个演示并尝试放入我的 SVG 元素，但没有用。请帮帮我!谢谢!
Activate CSS3 animation when the content scrolls into view
我的 HTML
<div class="lineNone">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 614 53" style="enable-background:new 0 0 614 53; width: 70%; margin-top: 40px;" xml:space="preserve">
<polyline class="st0 eighty" points="0.5,53 0.5,20.7 613.5,20.7 613.5,53 "/><line class="st1" x1="307" y1="53" x2="307" y2="0"/></svg>
</div>
最佳答案
这是你能做的，
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(window).scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
</script>
<style>
progress {
position:fixed;
top:15px;
}
</style>
</head>
<body>
<progress id="progressbar" value="0" max="100"></progress>
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/accessible.svg">
<div id="horizontal">test</div>
</body>
关于javascript - 在 View 中显示 SVG 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47809297/