如何使用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？

回答

相關問題