From the course: Interactive Animations with CSS and JavaScript
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Manipulating SVG with JavaScript
From the course: Interactive Animations with CSS and JavaScript
Manipulating SVG with JavaScript
- [Instructor] So we've inserted our SVG into our html page. So let's go back to the editor. And we can see, in our index.html, we have this SVG element here. And the way we're going to animate this is pretty simple. What we're going to do is we're going to run some JavaScript. And what the JavaScript will do is look at the SVG that we have inserted into our document, and try and see if it has any children. If it has a child, we'll take the first child, and we're going to remove it from the DOM and insert it into a new blank SVG. So, the first thing I'm going to do is use my data-onshow attribute to animate SVG. So that'll call a new function we're going to write, called animateSVG. Now I'm going to need to create a new blank SVG, so I'm gonna copy the SVG parent element here, opening tag. And I'm going to come to the bottom of the image, down here at the end of the file, and I'm gonna paste it right here. And I'm gonna make it empty, so it's just a closed tag. It's just going to be…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.