我正在尝试在我的网页上创建一个带有文本的 svg 元素。我正在使用 Javascript 构建 svg，但由于某种原因，文本不会显示。我已经阅读了很多关于此的问题，但我仍然一无所知。
代码:
.but {
display: block;
margin-left: auto;
margin-right: auto;
}
.svg-container {
position: relative;
text-align: center;
}
#bus {
z-index: -100;
transform-box: view-box;
transform-origin: center;
}
#busProps {
fill: black;
}<body>
<div class="svg-container" id="svgPlace"></div>
<button id="create" class="but" onclick=createSVG()>Click to create bus</button>
<button id="drawFool" class="but" onclick=changeColor()>Click to change color</button>
<button id="rotateBus" class="but" onclick=rotate()>Rotate</button>
<script>
const colors = ["blue", "green", "red", "yellow"];
let index = 0;
let currentRot = 0;
function createSVG() {
let markerContainer = document.getElementById('svgPlace');
let markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
markerSvg.setAttribute('id', 'bus');
markerSvg.setAttribute('viewBox', '0 0 512 512');
markerSvg.setAttribute('height', '50px');
markerSvg.setAttribute('width', '100px');
markerSvg.setAttribute('style', 'z-index: -100; text-align: center');
let busPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
busPath.setAttribute('id', 'busProps');
busPath.setAttribute('d', 'M480 358.856V153.143C480 130.512 461.674 112 439.272 112H72.728C50.326 112 32 130.512 32 153.143v205.713C32 381.488 50.326 400 72.728 400h366.545C461.674 400 480 381.488 480 358.856zM112 364V148h288v216H112z');
busPath.setAttribute('fill', '#FFFFFF');
let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'busNum');
text.setAttribute('x', '175');
text.setAttribute('y', '250');
text.setAttribute('fill', '#FFFFFF');
text.setAttribute('style', 'z-index: 1;')
text.textContent = '25';
markerSvg.appendChild(busPath);
markerSvg.appendChild(text);
markerContainer.appendChild(markerSvg);
}
function colorize(customColor) {
document.getElementById("busProps").style.fill = customColor;
}
function changeColor() {
index = (index + 1) % 4;
colorize(colors[index]);
}
function rotate() {
let rotBus = document.getElementById("bus");
currentRot = (currentRot + 45) % 360;
let rotString = "rotate(" + currentRot + ")";
rotBus.setAttribute("transform", rotString);
}
</script>我尝试过的一些事情包括更改文本元素的宽度属性、更改文本元素的字体大小以及调整文本元素的 x/y 位置。当前的 x/y 设置包含我至少应该能够看到其中一部分的文本 ( example )。我不知道可能是什么问题。
最佳答案
您在白色背景上有白色文本，就是这样。而且看起来文字太小了，你看不到它。 如果您设置字体大小，您可以使其可见。
text.setAttribute('font-size', '200');
调整了一些东西，但我想你可以从这里开始，让它看起来像你喜欢的样子。
.but {
display: block;
margin-left: auto;
margin-right: auto;
}
.svg-container {
position: relative;
text-align: center;
}
#bus {
z-index: -100;
transform-box: view-box;
transform-origin: center;
}
#busProps {
fill: black;
}<body>
<div class="svg-container" id="svgPlace"></div>
<button id="create" class="but" onclick=createSVG()>Click to create bus</button>
<button id="drawFool" class="but" onclick=changeColor()>Click to change color</button>
<button id="rotateBus" class="but" onclick=rotate()>Rotate</button>
<script>
const colors = ["blue", "green", "red", "yellow"];
let index = 0;
let currentRot = 0;
function createSVG() {
let markerContainer = document.getElementById('svgPlace');
let markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
markerSvg.setAttribute('id', 'bus');
markerSvg.setAttribute('viewBox', '0 0 512 512');
markerSvg.setAttribute('height', '50px');
markerSvg.setAttribute('width', '100px');
markerSvg.setAttribute('style', 'z-index: -100; text-align: center');
let busPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
busPath.setAttribute('id', 'busProps');
busPath.setAttribute('d', 'M480 358.856V153.143C480 130.512 461.674 112 439.272 112H72.728C50.326 112 32 130.512 32 153.143v205.713C32 381.488 50.326 400 72.728 400h366.545C461.674 400 480 381.488 480 358.856zM112 364V148h288v216H112z');
busPath.setAttribute('fill', '#FFFFFF');
let text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('id', 'busNum');
text.setAttribute('x', '160');
text.setAttribute('y', '320');
text.setAttribute('fill', '#000000');
text.setAttribute('font-size', '200');
text.setAttribute('style', 'z-index: 1;');
text.textContent = '25';
markerSvg.appendChild(busPath);
markerSvg.appendChild(text);
markerContainer.appendChild(markerSvg);
}
function colorize(customColor) {
document.getElementById("busProps").style.fill = customColor;
}
function changeColor() {
index = (index + 1) % 4;
colorize(colors[index]);
}
function rotate() {
let rotBus = document.getElementById("bus");
currentRot = (currentRot + 45) % 360;
let rotString = "rotate(" + currentRot + ")";
rotBus.setAttribute("transform", rotString);
}
</script>关于javascript - 文本未出现在 SVG 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59166487/