如何使用 raphaël 分隔两个 svg？答案

【问题标题】：How do I separate two svgs using raphaël?如何使用 raphaël 分隔两个 svg？
【发布时间】：2016-12-19 18:38:17
【问题描述】：

我是初学者。我可以得到我想要发生的行为，但不是在两个单独的 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);

【问题讨论】：

你已经覆盖了靠近底部的 'paper' 变量，所以它们不是分开的。
感谢伊恩的回复！我如何不覆盖变量“paper”？
当您想使用其他 svg 时使用不同的变量 paper2？

标签： javascript forms svg raphael

【解决方案1】：

例如更改第二个svg 的名称

paper2.circle

在你的设置函数中应该是

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

【讨论】：