Javascript 使用svg图像显示进度动画_Javascript_Jquery_Html_Css_Svg

Javascript 使用svg图像显示进度动画

javascript jquery html css svg

Javascript 使用svg图像显示进度动画,javascript,jquery,html,css,svg,Javascript,Jquery,Html,Css,Svg,我尝试了重叠和增加另一个的宽度，但因为它们不是线性的或简单的矩形我不知道是否有人有想法使用html、css、js和svg文件将这两个图像制作成进度条。增加或减少第二个div的宽度。确保内部图像不是宽度：100%或响应 <html> <head> <title>Test</title> </head> <body> <div id="img1" style="position: absolute;top: 0

我尝试了重叠和增加另一个的宽度，但因为它们不是线性的或简单的矩形

我不知道是否有人有想法使用html、css、js和svg文件将这两个图像制作成进度条。增加或减少第二个div的宽度。确保内部图像不是

宽度：100%

或响应

<html>
<head>
<title>Test</title>
</head>
<body>
    <div id="img1" style="position: absolute;top: 0;">
        <img src="amplitude.svg">
    </div>
    <div id="img2" style="position: absolute;top: 0;width: 20%;overflow: hidden;">
        <img src="amplitude-progress.svg">
    </div>
</body>
</html>


试验

将它们一个接一个地绘制，并设置剪辑路径的动画，以逐渐显示上部图像。