javascript - Snap SVG - Can I use multiple variables initialising snap.svg to point to different svg ID's in the markup? -
essentially build red , blue template in main.js have different colour versions of same set of shapes (for time being) using snap.svg.
my idea build 1 snap initialising variable "b" points svg id of #svg-red, , create snap initialising variable "r" point #svg-blue id. blue , red variables have own separately drawn circles , attributes.
that would've presumably allowed me switch between templates changing id of svg div in markup.
this whenever define snap command more 1 variable used, shapes dissapear.
any other simple svg/js/snap ideas welcome (i newbie!) :) main aim assign templates id's can switched in svg tag in markup.
window.onload = function(){ // blue template should point #svg-blue var b = snap("#svg-blue"); var cir_1 = b.circle(50,50,50); var cir_2 = b.circle(150,150,50); var cir_3 = b.circle(250,50,50); cir_1.attr({ fill:'lightblue' }); cir_2.attr({ fill:'lightblue', opacity:.7 }); cir_3.attr({ fill:'lightblue', opacity:.5 }); // red template should point #svg-blue var r = snap("#svg-red"); var cir_1_red = r.circle(50,50,50); var cir_2_red = r.circle(150,150,50); var cir_3_red = r.circle(250,50,50); cir_1_red.attr({ fill:'red' }); cir_2_red.attr({ fill:'red', opacity:.7 }); cir_3_red.attr({ fill:'red', opacity:.5 }); };svg { height: 500px; width: 500px; }<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>svg template</title> <script src="js/snap.svg.js"></script> <script src="js/main.js"></script> <link type="text/css" href="css/style.css" rel="stylesheet"/> </head> <body> <!--svg div snap main.js templates point to. svg-red can replaced svg-blue--> <svg id="svg-red"></svg> </body> </html>
so here's work around. separated snap svg templates functions, , call them individually through onload command on svg tag in markup. replaced snap svg initialising variable generic "s" throughout templates, , replaced svg's id in markup generic #svg. have swap out function name on onload command change templates.
i know coding 'dryer', when ever don't have variables in each separate function 'undefined variable'. if has better refinements, i'd grateful!
//working method! function blue(){ var s = snap("#svg"); var cir_1 = s.circle(50,50,50); var cir_2 = s.circle(150,150,50); var cir_3 = s.circle(250,50,50); // blue template cir_1.attr({ fill:'lightblue' }); cir_2.attr({ fill:'lightblue', opacity:.7 }); cir_3.attr({ fill:'lightblue', opacity:.5 }); }; function red(){ var s = snap("#svg"); var cir_1 = s.circle(50,50,50); var cir_2 = s.circle(150,150,50); var cir_3 = s.circle(250,50,50); // red template cir_1.attr({ fill:'red' }); cir_2.attr({ fill:'red', opacity:.7 }); cir_3.attr({ fill:'red', opacity:.5 }); };<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>svg template</title> <script src="js/snap.svg.js"></script> <script src="js/main.js"></script> <link type="text/css" href="css/style.css" rel="stylesheet"/> </head> <body> <!--svg div snap main.js templates point to. different functions called through onload command--> <svg id="svg" onload="blue();"></svg> </body> </html>
Comments
Post a Comment