SVG中的畫線
[英]Drawing line in SVG
問題描述
我正在嘗試編寫Tic Tac Toe游戲。 在這段代碼中，一切工作正常，但是當我想添加兩行作為十字符號時（例如，在此代碼中只有一行），它不會繪制到目標svg中。 似乎已添加該元素，因為如果我嘗試在線繪制3個十字架，則代碼返回“ X”獲勝，但看不到任何十字架。 因此看來問題只在於繪圖。 誰知道問題出在哪里？
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var filled;
var symbol_type;
var VyherniKomb;
var turn = 0;
var targetsvg;
var c;
var cxt;
var filledField = 0;
var w;
var y;
window.onload = function() {
filled = new Array();
symbol_type = new Array();
VyherniKomb = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (var m = 0; m <= 8; m++) {
filled[m] = false;
symbol_type[m] = '';
}
}
function svgEvent(svgNumber) {
targetsvg = "svg" + svgNumber;
c = document.getElementById(targetsvg);
if (filled[svgNumber - 1] == false) {
if (turn % 2 == 0) {
var svg = c;
var xmlns = "http://www.w3.org/2000/svg";
var cross = document.createElementNS('http://www.w3.org/2000/svg', "line");
cross.setAttribute("id", "line1");
cross.setAttribute("x1", "5");
cross.setAttribute("y1", "15");
cross.setAttribute("x2", "15");
cross.setAttribute("y2", "5");
cross.setAttribute("stroke", "black");
symbol_type[svgNumber - 1] = 'X';
} else {
var svg = c;
var xmlns = "http://www.w3.org/2000/svg";
var kolecko = document.createElementNS(xmlns, "circle");
kolecko.setAttribute("cx", 25);
kolecko.setAttribute("cy", 25);
kolecko.setAttribute("r", 15);
kolecko.style.stroke = "#111"
kolecko.style.strokeWidth = "2px"
kolecko.style.fill = "none"
svg.appendChild(kolecko);
symbol_type[svgNumber - 1] = 'O';
}
turn++;
filled[svgNumber - 1] = true;
filledField++;
checkForWinners(symbol_type[svgNumber - 1]);
if (filledField == 9) {
alert("Rem�za");
location.reload(true);
}
} else {}
}
function checkForWinners(symbol) {
for (var a = 0; a < VyherniKomb.length; a++) {
if (symbol_type[VyherniKomb[a][0]] == symbol && symbol_type[VyherniKomb[a][1]] == symbol && symbol_type[VyherniKomb[a][2]] == symbol) {
alert(symbol + " Vyhral");
newGame();
}
}
}
function newGame() {
y = confirm("hr�t znovu?");
if (y == true) {
alert("Start!");
location.reload(true);
} else {
alert("Hezk� den");
}
}
</script>
</head>
<body>
<h1>Hra</h1>
<h2>Tic-Tac-Toe</h2>
<svg id="svg1" width="50" height="50" style="border:3px solid red" onclick="svgEvent(1)"></svg>
<svg id="svg2" width="50" height="50" style="border:3px solid red" onclick="svgEvent(2)"></svg>
<svg id="svg3" width="50" height="50" style="border:3px solid red" onclick="svgEvent(3)"></svg>
<br/>
<svg id="svg4" width="50" height="50" style="border:3px solid red" onclick="svgEvent(4)"></svg>
<svg id="svg5" width="50" height="50" style="border:3px solid red" onclick="svgEvent(5)"></svg>
<svg id="svg6" width="50" height="50" style="border:3px solid red" onclick="svgEvent(6)"></svg>
</br>
<svg id="svg7" width="50" height="50" style="border:3px solid red" onclick="svgEvent(7)"></svg>
<svg id="svg8" width="50" height="50" style="border:3px solid red" onclick="svgEvent(8)"></svg>
<svg id="svg9" width="50" height="50" style="border:3px solid red" onclick="svgEvent(9)"></svg>
</body>
</html>
1 個解決方案
解決方案1
2 2016-05-30 20:29:27
您有幾個錯誤。 首先，您沒有將行附加到svg。 其次，您只有一條線路，沒有兩條線路，最后一條線路相對較小。 這是您的代碼的有效版本。
var filled; var symbol_type; var VyherniKomb; var turn = 0; var targetsvg; var c; var cxt; var filledField = 0; var w; var y; window.onload = function() { filled = new Array(); symbol_type = new Array(); VyherniKomb = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (var m = 0; m <= 8; m++) { filled[m] = false; symbol_type[m] = ''; } } function svgEvent(svgNumber) { targetsvg = "svg" + svgNumber; c = document.getElementById(targetsvg); if (filled[svgNumber - 1] == false) { if (turn % 2 == 0) { var svg = c; var xmlns = "http://www.w3.org/2000/svg"; var line = document.createElementNS('http://www.w3.org/2000/svg', "line"); line.setAttribute("id", "line1"); line.setAttribute("x1", 37); line.setAttribute("y1", 13); line.setAttribute("x2", 13); line.setAttribute("y2", 37); line.setAttribute("stroke", "black"); line.style.stroke = "#111" line.style.strokeWidth = "2px" svg.appendChild(line); var line = document.createElementNS('http://www.w3.org/2000/svg', "line"); line.setAttribute('id', 'line2'); line.setAttribute('x1', 13); line.setAttribute('y1', 13); line.setAttribute("x2", 37); line.setAttribute("y2", 37); line.setAttribute("stroke", "black"); line.style.stroke = "#111" line.style.strokeWidth = "2px" svg.appendChild(line); symbol_type[svgNumber - 1] = 'X'; } else { var svg = c; var xmlns = "http://www.w3.org/2000/svg"; var kolecko = document.createElementNS(xmlns, "circle"); kolecko.setAttribute("cx", 25); kolecko.setAttribute("cy", 25); kolecko.setAttribute("r", 15); kolecko.style.stroke = "#111" kolecko.style.strokeWidth = "2px" kolecko.style.fill = "none" svg.appendChild(kolecko); symbol_type[svgNumber - 1] = 'O'; } turn++; filled[svgNumber - 1] = true; filledField++; checkForWinners(symbol_type[svgNumber - 1]); if (filledField == 9) { alert("Rem za"); location.reload(true); } } else {} } function checkForWinners(symbol) { for (var a = 0; a < VyherniKomb.length; a++) { if (symbol_type[VyherniKomb[a][0]] == symbol && symbol_type[VyherniKomb[a][1]] == symbol && symbol_type[VyherniKomb[a][2]] == symbol) { alert(symbol + " Vyhral"); newGame(); } } } function newGame() { y = confirm("hr t znovu?"); if (y == true) { alert("Start!"); location.reload(true); } else { alert("Hezk den"); } }
<h1>Hra</h1> <h2>Tic-Tac-Toe</h2> <svg id="svg1" width="50" height="50" style="border:3px solid red" onclick="svgEvent(1)"></svg> <svg id="svg2" width="50" height="50" style="border:3px solid red" onclick="svgEvent(2)"></svg> <svg id="svg3" width="50" height="50" style="border:3px solid red" onclick="svgEvent(3)"></svg> <br/> <svg id="svg4" width="50" height="50" style="border:3px solid red" onclick="svgEvent(4)"></svg> <svg id="svg5" width="50" height="50" style="border:3px solid red" onclick="svgEvent(5)"></svg> <svg id="svg6" width="50" height="50" style="border:3px solid red" onclick="svgEvent(6)"></svg> </br> <svg id="svg7" width="50" height="50" style="border:3px solid red" onclick="svgEvent(7)"></svg> <svg id="svg8" width="50" height="50" style="border:3px solid red" onclick="svgEvent(8)"></svg> <svg id="svg9" width="50" height="50" style="border:3px solid red" onclick="svgEvent(9)"></svg>
為什么這種在 SVG 元素中畫線的方法在反應中不起作用？
[英]Why does this approach to drawing a line in an SVG element in react not work?
SVG 路徑繪制動畫 - 使用anime.js 繪制線條，如何阻止線條重疊
[英]SVG path drawing animation - line drawing with anime.js, how to stop lines from overlapping
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.