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

I'm a beginner beginner. I can get the behavior that I want to occur, but instead of occurring in two separate SVGs, all the behavior is occurring in 'svg2' although I have selected the respective ids for 'svg1' and 'svg2' (or at least I think I did)

我是初学者。我可以得到我想要发生的行为,但不是发生在两个单独的SVG中,所有行为都发生在'svg2'中,尽管我为'svg1'和'svg2'选择了相应的id(或者至少我认为我做了)

<!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);

1 个解决方案

#1

change the name for the second svg for example

例如,更改第二个svg的名称

paper2.circle

and in your setup function it should be

它应该是你的设置功能

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

#1