如何使用raphaël分离两个SVG？

我是初学者初学者。我可以得到我想要发生的行为，但不是发生在两个独立的SVG中，尽管我已经为'svg1'和'svg2'选择了相应的id，但所有行为都发生在'svg2'中（或者至少我认为我做了）如何使用raphaël分离两个SVG？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script> 
<script src="logic.js"></script> 
<title>Forms and Concentric Circles</title> 
</head> 
<body> 
<h1>Forms and Concentric Circles</h1> 

<div id="svg1"></div> 

<div class="form">Add how many? 
<input type="text" id="howmany" /> 
<button id="more">Add More</button></div> 

<div id="svg2"></div> 

<div class="form"> 
<button id="another">Add Another</button> 
</div> 

</body> 
</html> 


var paper; 

disappear = function() { 
this.remove(); 
} 

spin = function(r) { 
    angle = Math.random()*1440 - 720; 
    initial = { 'transform': 'r0' } 
    final = { 'transform': 'r' + angle} 
    r.attr(initial); 
    r.animate(final, 2000); 
} 

addMore = function() { 
    rectNum = $('#howmany').val(); 
    for (step = 0; step < rectNum; step += 1) { 
    x = Math.random() * 180; 
    y = Math.random() * 180; 
    r = paper.rect(x, y, 20, 20); 
    filled = { 
    'fill': '#ddf' 
    } 
    r.attr(filled); 
    r.click(disappear); 
    spin(r); 
    } 
} 

radius = 10 
morecircles = function() { 
paper.circle(100, 100, radius); 
radius = radius + 10; 
} 

setup = function() { 
    paper = Raphael('svg1', 200, 200); 
    $('#more').click(addMore); 

    paper = Raphael('svg2', 200, 200); 
    $('#another').click(morecircles); 
} 

$(document).ready(setup);

来源

2016-08-12 evieeive

您已覆盖底部附近的'纸'变量，因此它们不是分开的。 – Ian

感谢您回复伊恩！我怎样才不会覆盖变量'paper'？ – evieeive

使用不同的变量，paper2用于何时要使用其他svg？ – Ian

第二svg改变名称，例如

paper2.circle

，并在你的设置功能应该是

paper2.Raphael('svg2',200,200)

来源

2017-03-23 04:33:13

如何使用raphaël分离两个SVG？

回答

相关问题