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

Question

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

我想通过导入 After Effect 来检查动画是如何工作的，但是右键单击 copy/paste SVG 文件只是复制非动画 SVG...

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

https://evervault.com/

Answer 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>

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

How to download animated SVG file from website?

html

css

svg

after-effects