Javascript Snap SVG-我可以使用多个变量初始化Snap.SVG以指向不同的SVG ID'；标记中有什么？

基本上，我希望在main.js中构建一个红色和蓝色模板，以便使用snap.svg获得同一组形状（目前）的不同颜色版本

我的想法是构建一个快照初始化变量“b”，该变量指向id为#svg red的svg，然后创建另一个快照初始化变量“r”，该变量将指向#svg blue id。然后，蓝色和红色变量将分别绘制圆和属性

这可能允许我通过简单地更改标记中svg div的id在模板之间切换

但是，每当我将Snap命令定义为使用的多个变量时，所有形状都会消失

欢迎任何其他简单的SVG/JS/Snap想法（我是新手！） 我的主要目标是将模板分配给ID，ID可以在标记中的svg标记中轻松切换

window.onload=function（）{
//蓝色模板，应指向#svg蓝色
var b=Snap（“#svg蓝色”）；
var cir_1=b圆（50,50,50）；
var cir_2=b.圆（150150,50）；
var cir_3=b圆（250,50,50）；
cir_1.attr({
填充：“浅蓝色”
});
cir_2.attr({
填充：'浅蓝色'，
不透明度：.7
});
cir_3.attr({
填充：'浅蓝色'，
不透明度：.5
});
//红色模板，应指向#svg蓝色
var r=Snap（“#svg红色”）；
var cir_1_red=r圆（50,50,50）；
var cir_2_red=r圆（150150,50）；
var cir_3_red=r圆（250,50,50）；
cir_1_red.attr({
填充：“红色”
});
cir_2_red.attr({
填充：'红色'，
不透明度：.7
});
cir_3_red.attr({
填充：'红色'，
不透明度：.5
});
};
svg{
高度：500px；
宽度：500px；
}

SVG模板
以下是我的工作。我将snap svg模板分离为函数，然后通过标记中svg标记上的onload命令分别调用它们。然后，我在整个模板中将snap svg初始化变量替换为通用的“s”，并将标记中的svg的id替换为通用的#svg。现在我所要做的就是在onload命令中替换掉函数名来更改模板

我知道我可以编写'dreer'，但当我在每个单独的函数中没有变量时，我会得到'undefined variable'。如果有人有更好的改进，我将不胜感激


//工作方法！
函数蓝（）{
var s=Snap（“#svg”）；
var cir_1=s圆（50,50,50）；
var cir_2=s圆（150150,50）；
var cir_3=s圆（250,50,50）；
//蓝色模板
cir_1.attr({
填充：“浅蓝色”
});
cir_2.attr({
填充：'浅蓝色'，
不透明度：.7
});
cir_3.attr({
填充：'浅蓝色'，
不透明度：.5
});
};
函数red（）{
var s=Snap（“#svg”）；
var cir_1=s圆（50,50,50）；
var cir_2=s圆（150150,50）；
var cir_3=s圆（250,50,50）；
//红色模板
cir_1.attr({
填充：“红色”
});
cir_2.attr({
填充：'红色'，
不透明度：.7
});
cir_3.attr({
填充：'红色'，
不透明度：.5
});
};

SVG模板
从问题中不太确定为什么不使用相同的单一形状集，使用css类包括填充，您可以切换以更改颜色。