如何在特定的svg元素之后添加svg文本元素？ （或者是否有更简单的方法？）
[英]How can I add an svg text element after a specific svg element? (Or is there an easier way to do this?)
问题描述
基本上，我是在圈上贴上标签的方式对圈进行硬编码。 但我希望能够使用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>
这是我的代码：
1 个解决方案
解决方案1
0 已采纳 2019-01-08 20:13:36
最简单的方法是使用Javascript创建所有这些圆和tex。 另外，我还将一些内容移到了CSS中：fill，stroke，font-family，font-size。 。 。等等
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>
如何通过在svg元素上调整大小来使文本的位置动态化？
[英]How do I make the position of the text dynamic with resize on an svg element?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.