基本上，我正在对圈子加上标签进行硬编码。但我希望能够使用javascript和for循环执行此操作。我将如何去做呢？为了提供更多的内容，我希望基本上在座位上放置其ID号（文本）。另外，有没有一种方法可以自动将文本居中到每个圆的中心，而不必手动对该部分进行编码？感谢您的宝贵时间。
var overlapThreshold = "50%";
var name_count = 0;
var x_axis_seats = 22;
function change_name(event) {
var name = prompt("Enter a New Name (Max 20 characters):");
while(name.length > 20) {
name = prompt("Enter a New Name (Previous Over 20 Characters)");
}
if (name != null && name != "") {
event.target.textContent = name;
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="test_button" onclick="create_seats()">Test</button>
<svg height="1500" width="1500">
<defs>
<lineargradient id="gradGreen" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(152, 251, 152);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(0, 128, 0);stop-opacity:1"></stop>
</lineargradient>
<lineargradient id="gradYellow" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 140, 0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(218, 165, 32);stop-opacity:1"></stop>
</lineargradient>
<lineargradient id="gradRed" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(178, 34, 34);stop-opacity:1"></stop>
</lineargradient>
</defs>
<g class="circle_seat" id="circle_seats">
<circle cx="21" cy="580" fill="url(#gradGreen)" id="seat1" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana"x="11" y="590">1</text>
<circle cx="70" cy="580" fill="url(#gradGreen)" id="seat2" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=60 y="590">2</text>
<circle cx="119" cy="580" fill="url(#gradGreen)" id="seat3" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=109 y="590">3</text>
<circle cx="168" cy="580" fill="url(#gradGreen)" id="seat4" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=158 y="590">4</text>
<circle cx="217" cy="580" fill="url(#gradGreen)" id="seat5" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=207 y="590">5</text>
<circle cx="266" cy="580" fill="url(#gradGreen)" id="seat6" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=256 y="590">6</text>
<circle cx="315" cy="580" fill="url(#gradGreen)" id="seat7" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=305 y="590">7</text>
<circle cx="364" cy="580" fill="url(#gradGreen)" id="seat8" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=354 y="590">8</text>
<circle cx="413" cy="580" fill="url(#gradGreen)" id="seat9" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="30" font-family="Verdana" x=403 y="590">9</text>
<circle cx="462" cy="580" fill="url(#gradGreen)" id="seat10" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x=444 y="590">10</text>
<circle cx="511" cy="580" fill="url(#gradGreen)" id="seat11" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x=493 y="590">11</text>
<circle cx="609" cy="580" fill="url(#gradGreen)" id="seat12" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="591" y="590">12</text>
<circle cx="658" cy="580" fill="url(#gradGreen)" id="seat13" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="640" y="590">13</text>
<circle cx="707" cy="580" fill="url(#gradGreen)" id="seat14" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="689" y="590">14</text>
<circle cx="756" cy="580" fill="url(#gradGreen)" id="seat15" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="738" y="590">15</text>
<circle cx="805" cy="580" fill="url(#gradGreen)" id="seat16" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="787" y="590">16</text>
<circle cx="854" cy="580" fill="url(#gradGreen)" id="seat17" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="836" y="590">17</text>
<circle cx="903" cy="580" fill="url(#gradGreen)" id="seat18" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="885" y="590">18</text>
<circle cx="952" cy="580" fill="url(#gradGreen)" id="seat19" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="934" y="590">19</text>
<circle cx="1001" cy="580" fill="url(#gradGreen)" id="seat20" r="20" stroke="black" stroke-width="1" />
<text fill="#black" font-size="28" font-family="Verdana" x="983" y="590">20</text>
</g>
<g class="seat_name" id="seat_name1">
<text fill="#black" font-family="Verdana" font-size="15" id="seat_name1" ondblclick="change_name(event)" x="250" y="210">
BLANK
</text>
</g>
</svg>
</body>
</html>
这是我的代码：
答案 0 :(得分：0)
最简单的方法是使用Javascript创建所有这些圆和tex。另外，我还将一些内容移到了CSS中：fill，stroke，font-family，font-size。 。 .etc
const SVG_NS = 'http://www.w3.org/2000/svg';
let Y = 80;
// create the circles and the text.
for(let i = 0; i< 20; i++){
let x = 21 + i*49;
drawCircle({cx:x, cy:Y,r:20},circle_seats);
drawText({props:{x:x, y:Y},txtContent:i}, circle_seats);
}
function drawCircle(o, parent) {
var circle = document.createElementNS(SVG_NS, 'circle');
for (var name in o) {
if (o.hasOwnProperty(name)) {
circle.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(circle);
return circle;
}
function drawText(o, parent) {
var text = document.createElementNS(SVG_NS, "text");
for (var name in o.props) {
if (o.props.hasOwnProperty(name)) {
text.setAttributeNS(null, name, o.props[name]);
}
}
text.textContent = o.txtContent;
parent.appendChild(text);
return text;
}text {
fill: black;
font-family: Verdana;
font-size: 28px;
stroke: black;
dominant-baseline:middle;
text-anchor:middle;
}
circle {
fill: url(#gradGreen);
stroke: black;
}<svg id="svg" height="1500" width="1500">
<defs>
<lineargradient id="gradGreen" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(152, 251, 152);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(0, 128, 0);stop-opacity:1"></stop>
</lineargradient>
<lineargradient id="gradYellow" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 140, 0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(218, 165, 32);stop-opacity:1"></stop>
</lineargradient>
<lineargradient id="gradRed" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255, 0, 0);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(178, 34, 34);stop-opacity:1"></stop>
</lineargradient>
</defs>
<g class="circle_seat" id="circle_seats">
</g>
<g class="seat_name" id="seat_name1">
<text fill="#black" font-family="Verdana" font-size="15" id="seat_name1" ondblclick="change_name(event)" x="250" y="210">
BLANK
</text>
</g>
</svg>