raphaël을 사용하여 두 개의 svg를 분리하는 방법은 무엇입니까?

초보자입니다. 내가 원하는 행동을 얻을 수 있지만 두 개의 별도 SVG에서 발생하는 대신 'svg1'및 'svg2'에 대해 각각의 ID를 선택했지만 모든 동작이 'svg2'에서 발생합니다 (또는 적어도 생각합니다. 나는 그것이 있어야 raphaël을 사용하여 두 개의 svg를 분리하는 방법은 무엇입니까?

paper2.circle

및 설정 기능에

예를 들어 두 번째 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

변화 이름을)했다

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

출처

2017-03-23 04:33:13

raphaël을 사용하여 두 개의 svg를 분리하는 방법은 무엇입니까?

답변

관련 문제