有什么方法可以從網站下載影片 SVG 檔案 - 比如從Inspect dev tool?
我想通過匯入后效來檢查影片是如何作業的，但是右鍵單擊并復制/粘貼 SVG 檔案只會復制非影片 SVG ......
這是我找到的示例 - 頂部英雄部分有一個影片 SVG 檔案。
https://evervault.com/
uj5u.com熱心網友回復：
是的，您可以在您選擇的瀏覽器上打開開發人員工具，然后在 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481562.html