Snap SVG - 我可以使用多个变量初始化snap.svg以指向标记中的不同svg ID吗？

时间：2021-12-28 20:31:11

Essentially I would like to build a red and a blue template in my main.js to have different colour versions of the same set of shapes (for the time being) using snap.svg.

基本上我想在我的main.js中构建一个红色和蓝色模板,使用snap.svg来获得同一组形状(暂时)的不同颜色版本。

My idea was to build one snap initialising variable "b" which points to the svg with the id of #svg-red, and then create another snap initialising variable "r" which would point to #svg-blue id. The blue and red variables would then have their own separately drawn circles and attributes.

我的想法是构建一个快照初始化变量“b”,它指向带有#svg-red id的svg,然后创建另一个快照初始化变量“r”,它将指向#svg-blue id。然后蓝色和红色变量将有自己单独绘制的圆和属性。

That would've presumably allowed me to switch between templates by simply changing the id of my svg div in my markup.

这可能只是通过在我的标记中更改我的svg div的id来允许我在模板之间切换。

This however whenever I define the Snap command into more than one variable that is used, all the shapes dissapear.

然而,每当我将Snap命令定义为使用的多个变量时,所有形状都会消失。

Any other simple SVG/JS/Snap ideas are welcome (I am a newbie!) :) My main aim is to assign templates to ID's which can easily be switched in the svg tag in the markup.

欢迎任何其他简单的SVG / JS / Snap想法(我是新手!):)我的主要目的是为ID分配模板,可以在标记中的svg标签中轻松切换。

window.onload = function(){

//    Blue template which should point to #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 which should point to #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 where the snap main.js templates point to. svg-red can be replaced with svg-blue-->
    <svg id="svg-red"></svg>
    
</body>
</html>

1 个解决方案

#1

0  

So here's my work around. I separated the snap svg templates into functions, and then call them up individually through the onload command on the svg tag in the markup. I then replaced the snap svg initialising variable to a generic "s" throughout the templates, and replaced the svg's id in the markup to the generic #svg. Now all i have to do is swap out the function name on the onload command to change templates.

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

I know I could be coding 'dryer', but when ever i don't have the variables in each separate function I get 'undefined variable'. If anyone has any better refinements, I'd be 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 where the snap main.js templates point to. Different functions are called up through the onload command-->
    <svg id="svg" onload="blue();"></svg>
</body>
</html>

#1

0  

So here's my work around. I separated the snap svg templates into functions, and then call them up individually through the onload command on the svg tag in the markup. I then replaced the snap svg initialising variable to a generic "s" throughout the templates, and replaced the svg's id in the markup to the generic #svg. Now all i have to do is swap out the function name on the onload command to change templates.

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

I know I could be coding 'dryer', but when ever i don't have the variables in each separate function I get 'undefined variable'. If anyone has any better refinements, I'd be 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 where the snap main.js templates point to. Different functions are called up through the onload command-->
    <svg id="svg" onload="blue();"></svg>
</body>
</html>

标签：

相关文章