Paddy Posted April 3, 2020 Share Posted April 3, 2020 Hi, I'm new to animating SVGs. For this attached one, I'll be moving and re-sizing the colored shapes down the tall vertical tubes using inline SVG, HTML and JS with GreenSock. What little programming sense I have is telling me that creating an SVG with 4 tubes and twelve colored shapes is breaking the "Don't Repeat Yourself" rule. Can anyone give me some pointers on the "correct" way to create duplicate graphics and show/hide between one and four on screen at once? Can I create just a single version of the colored square (with the graduated fill) and create a number of different colored versions (which I can animate separately) by changing a color attribute without losing the other fill stop colors/positions? They'd all need different IDs of course - would I generate the SVG code using JS? I hope that all makes sense. Thanks - Paddy burette-tryout-opt.svg Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 Hey Paddy. 2 hours ago, Paddy said: What little programming sense I have is telling me that creating an SVG with 4 tubes and twelve colored shapes is breaking the "Don't Repeat Yourself" rule. Can anyone give me some pointers on the "correct" way to create duplicate graphics and show/hide between one and four on screen at once? SVG is not your conventional programming language. Most the time it'd be better considered as assets. Repeating yourself in an SVG is not really a big deal - it's more like like having multiple divs all called "card" on your page that serve different purposes. With that being said, if you really want to you can reduce the amount of repetition by using SVG's <use> element. You can then change the color of each as needed. This can save file size but <use> element can also be harder to work with at times depending on your animation needs. As is usually the case, the best way method on your needs 1 Link to comment Share on other sites More sharing options...
Paddy Posted April 3, 2020 Author Share Posted April 3, 2020 Hi Zach, thanks for the suggestion. I've just encountered the <use> element here on the Greensock Forum where it's been renamed "the <don't use> element" ! I've been trying out the cloneNode command which I can make sense of, though I gather it might not clone things like fills that are in the <defs> section of the SVG? Are there any other common cloneNode pitfalls I should watch out for? I've started out by creating my SVGs in Inkscape so they're enormous messy things at the best of times, and once I start creating several copies of the same images... Having worked with CSS for the last 20ish years, all those inline SVG styles etc feel wrong! SVGOMG is a bit of a saviour. I'll have a look at the world of <use> too, then hopefully I'll be applying some GreenSock action to a new interactive tool. Thanks again - Paddy Link to comment Share on other sites More sharing options...
PointC Posted April 3, 2020 Share Posted April 3, 2020 I'd recommend creating your elements in a loop. Here's a basic starter example of that. See the Pen ZEGNyQy by PointC (@PointC) on CodePen Here's another thread where professor @OSUblake talks about using a document fragment and the performance pitfalls of <use>. I think you'll find it helpful. Happy tweening. 3 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now