如何从网站下载动画 SVG 文件？答案

【问题标题】：How to download animated SVG file from website?如何从网站下载动画 SVG 文件？
【发布时间】：2022-06-18 02:50:35
【问题描述】：

我们有什么方法可以从网站下载动画 SVG 文件 - 比如从 Inspect dev tool 下载？

我想通过导入 after effect 来检查动画是如何工作的，但是右键单击并复制/粘贴 SVG 文件只会复制非动画 SVG...

这是我找到的示例 - 顶部英雄部分有一个动画 SVG 文件。

https://evervault.com/

【问题讨论】：

如果你能给我们举个例子，帮助会容易得多。
刚刚添加了一些包含动画 svg 的示例网站：evervault.com
我看不到 SVG 文件，只有代码中的 SVG 元素。这可以通过例如通过浏览器开发工具检查它并右键单击它（至少在我知道的浏览器上）并选择编辑 HTML 来复制

标签： html css svg after-effects

【解决方案1】：

是的，您可以在您选择的浏览器上打开开发人员工具，然后在 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>

【讨论】：

谢谢 - Copy Outer HTML 技巧有效