你能動態地為 SVG 設置動畫嗎？
[英]Can you dynamically animate a SVG?
問題描述
我正在對我的網站進行編碼，我有一個好主意來為我的導航欄設置動畫，該導航欄位於 SVG 容器中。 由於自然波浪設計，我想要一些類似於 Discord 介紹的東西，其中波浪在揮動時掃過屏幕。 所以我想知道是否有辦法做到這一點，對任何想法持開放態度。 JQuery、Java、CSS，任何有幫助的東西。
我曾稍微使用過 CSS，但不知道是從 Java 還是 JQuery 開始。 我正在尋找一種方法來使用漢堡菜單來實現 onClick。
body { font-family: 'Raleway', Arial, Verdana, sans-serif; overflow-x: hidden; } a { text-decoration: none; color: white; } .main_hd_cont { position: absolute; top: -1.25vw; left: 1.5vw; z-index: 2; color: white; } .main_hd_txt { font-size: 3.5vw; font-family: 'ballet_harmonyballet_harmony'; } svg { filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6)); } .navigation_svg { position: absolute; top: 0; left: 0; z-index: 1; max-width: 100vw; width: 100vw; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>Code Cafe | Home </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"> <!--Fonts from Google Fonts API Directory, all rights reserved to original typographers and the Google Corperation --> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <!--Styling for Font Awesome Icon library, for high quality icons visit Font Awesome online --> <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script> <!--Script link for JQuery Libraries and Scroll Magic API(s) --> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script> <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <!-- paste locally stored JavaScript file link here --> <style> @font-face { font-family: 'ballet_harmonyballet_harmony'; src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } </style> </head> <body> <section class="main_hd_cont"> <header class="main_hd"> <h1 class="main_hd_txt">Company Name</h1> </header> </section> <!--SVG Graphic as Navigation holder w/ Hamburger Menu Activation --> <section class="navigation_svg"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 575" style="enable-background:new 0 0 1920 575;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="287.2289" x2="1920" y2="287.2289"> <stop offset="0" style="stop-color:#8C572B"/> <stop offset="0.9974" style="stop-color:#593118"/> </linearGradient> <path class="st0" d="M57.5,139c52.6,0,272.7-21,509.6,0s515.9,0,556.8,0c19.4,0,37.8,8.3,50.7,22.7 c35.5,39.7,120.6,119.2,245.4,136.3c96.7,13.2,176.4,61.6,226.8,100.2c28.6,22,53.6,48.3,74.5,77.7c28.7,40.3,94.9,112.1,194.9,97.7 c2.2-0.3,3.8-2.2,3.8-4.4V-1H0v82.5C0,113.3,25.7,139,57.5,139z"/> </svg> </section> </section> </body> </html>
@keyframes為@keyframes設置動畫的能力的一個測試。
1 個解決方案
解決方案1
1 已采納 2019-03-30 11:44:33
您可以使用 css 轉換路徑的 d 屬性，如下所示：
path { transition: d 1s; d: path('M547 93.0001C496 38.0001 457 29 372 15C276.086 -0.79759 -57 -52 9.99988 240C33.2036 341.127 87.9999 397 157 366C226 335 285 227 325 341C365 455 407 425 598 412C789 399 841 322 839 233C837 144 688 162 642 169C596 176 598 148 547 93.0001Z'); } path:hover { d: path('M547 92C471.994 92 482.5 -39.5 372 14C284.509 56.3601 -57 -53 9.99984 239C33.2035 340.127 82.5699 351.503 157 365C253.5 382.5 248.741 246.296 325 340C401.5 434 445.063 526.153 598 411C768 283 874.5 310 839 232C802.123 150.975 671.067 131.667 642 168C616 200.5 613 92 547 92Z'); }
<svg viewBox="0 0 900 500"> <path d=""/> </svg>
使用關鍵幀
path { animation: 10s infinite alternate wave ease-in-out; } @keyframes wave { from { d: path("M2,5 S2,-2 4,5 S7,8 8,4") } to { d: path("M2,5 S2,14 4,5 S7,8 8,4") } } body {display: flex;} svg {width: 100%;} path {fill: none;stroke: #000;}
<svg viewBox="0 0 10 10"> <path d="M2,5 S2,-2 4,5 S7,8 8,4" /> </svg>
SVG<animate> 使用動態創建時不起作用<use></use></animate>
[英]SVG <animate> not working when created dynamically using <use>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.