我们是否有办法从网站上下载动画SVG文件-像从Inspect dev tool?
我想通过导入after effect来检查动画是如何工作的，但是右键单击并复制/粘贴SVG文件只是复制非动画SVG…
这是我发现的例子-在顶部的英雄部分有一个动画SVG文件。
https://evervault.com/
是的，你可以在你选择的浏览器上打开开发人员工具并使用"Copy->Copy Outer HTML"SVG元素。这样做并将SVG粘贴到新的HTML文件中，使我获得了您提供的网站的动画行。
您不妨将复制的代码保存为。svg文件，它应该足以让您使用支持的软件打开它。
工作HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="100vw" viewBox="0 0 1920 700" fill="none" class="HeroAnimation_svg__soPwa">
<path
d="M1 3.00354C179.628 198.347 377.216 285 632.684 285C888.152 285 973.973 285 1290.31 285C1606.65 285 1797.76 143.751 1921 1.00002"
stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
<path d="M1 197.5C185.5 282.5 336 320 631 320C926 320 980 320 1291 320C1602 320 1746.5 276.5 1921 197.5"
stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
<path d="M1 354H1921" stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
<path d="M1 510C185.5 425 336 387.5 631 387.5C926 387.5 980 387.5 1291 387.5C1602 387.5 1746.5 431 1921 510"
stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
<path
d="M1 704.996C179.628 509.653 377.216 423 632.684 423C888.152 423 973.973 423 1290.31 423C1606.65 423 1797.76 564.249 1921 707"
stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
<line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
transform="translate(-80,0)" vector-effect="non-scaling-stroke">
<animateMotion dur="3s" repeatCount="indefinite"
path="M1 3.00354C179.628 198.347 377.216 285 632.684 285C888.152 285 973.973 285 1290.31 285C1606.65 285 1797.76 143.751 1921 1.00002"
rotate="auto" begin="1"></animateMotion>
</line>
<line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
transform="translate(-80,0)" vector-effect="non-scaling-stroke">
<animateMotion dur="2.5s" repeatCount="indefinite"
path="M1 197.5C185.5 282.5 336 320 631 320C926 320 980 320 1291 320C1602 320 1746.5 276.5 1921 197.5"
rotate="auto" begin="5"></animateMotion>
</line>
<line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
transform="translate(-80,0)" vector-effect="non-scaling-stroke">
<animateMotion dur="4s" repeatCount="indefinite" path="M1 354H1921" rotate="auto" begin="3"></animateMotion>
</line>
<line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
transform="translate(-80,0)" vector-effect="non-scaling-stroke">
<animateMotion dur="3.5s" repeatCount="indefinite"
path="M1 510C185.5 425 336 387.5 631 387.5C926 387.5 980 387.5 1291 387.5C1602 387.5 1746.5 431 1921 510"
rotate="auto" begin="2"></animateMotion>
</line>
<line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
transform="translate(-80,0)" vector-effect="non-scaling-stroke">
<animateMotion dur="4.5s" repeatCount="indefinite"
path="M1 704.996C179.628 509.653 377.216 423 632.684 423C888.152 423 973.973 423 1290.31 423C1606.65 423 1797.76 564.249 1921 707"
rotate="auto" begin="0"></animateMotion>
</line>
<defs>
<linearGradient id="datum" x1="0" y1="0" x2="80" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="transparent " offset="0"></stop>
<stop stop-color="white" offset="1"></stop>
</linearGradient>
<linearGradient id="path" x1="0" y1="0" x2="100%" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="transparent " offset="0%"></stop>
<stop stop-color="var(--primary)" offset="10%"></stop>
<stop stop-color="var(--primary)" offset="90%"></stop>
<stop stop-color="transparent" offset="100%"></stop>
</linearGradient>
</defs>
</svg>
</body>
</html>