在 SVG 中创建形状
Posted
技术标签:
【中文标题】在 SVG 中创建形状【英文标题】：Creating shapes in an SVG 【发布时间】：2017-05-03 23:08:31 【问题描述】：对于我的任务，我们创建了一个 SVG 块，用户输入一个数字，然后我们将该数量的正方形添加到 svg 块中随机位置的 svg 块中。我的代码不起作用。
这是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="logic.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Exercise 10</title>
</head>
<body>
<h1>Exercise 10</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>
这是我的 javascript：
var num_squares, x, y;
num_squares = $('#howmany').val()
add_more = function()
for (count = 0;count < num_squares;count += 1)
x = Math.random() * 180
y = Math.random() * 180
r = paper.rect(x, y, 20, 20)
filled =
'fill': '#ddf'
r.attr(filled)
setup = function()
paper = Raphael('svg1', 200, 200)
add_more()
jQuery(document).ready(setup)
这是我的 CSS：
#svg1
border: black;
【问题讨论】：
【参考方案1】：您在函数外部（即在文档加载时）初始化 num_squares。这是在任何人输入数字之前，因此 num_squares 始终为空，因此您的循环不会执行任何操作。按下按钮时，您也不会调用 add_more。
add_more = function()
var num_squares, x, y;
num_squares = $('#howmany').val();
for (count = 0;count < num_squares;count += 1)
x = Math.random() * 180
y = Math.random() * 180
r = paper.rect(x, y, 20, 20)
filled =
'fill': '#ddf'
r.attr(filled)
setup = function()
paper = Raphael('svg1', 200, 200)
jQuery(document).ready(setup)#svg1
border: black;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script>
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script>
<script src="logic.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Exercise 10</title>
</head>
<body>
<h1>Exercise 10</h1>
<div id="svg1"></div>
<div class="form">Add how many?
<input type="text" id="howmany">
<button id="more" onclick="add_more()">Add More</button></div>
<div id="svg2"></div>
<div class="form">
<button id="another">Add Another</button>
</div>
</body>
</html>【讨论】：
我在答案的第一段中所说的。以上是关于在 SVG 中创建形状的主要内容，如果未能解决你的问题，请参考以下文章