我们有什么方法可以从网站下载动画 SVG 文件 - 比如从
Inspect dev tool我想通过导入 After Effect 来检查动画是如何工作的，但是右键单击并复制/粘贴 SVG 文件只会复制非动画 SVG...
这是我找到的示例 - 顶部英雄部分有一个动画 SVG 文件。
是的，您只需在您选择的浏览器上打开开发人员工具，然后在 SVG 元素上使用“复制->复制外部 HTML”即可。执行此操作并将 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>它不适用于lottie 动画。请建议任何替代方案。