javascript - 放大后保持 SVG 中的文本可见

Question

我在我的 SVG 中定义了以下文本元素：

var data = document.createTextNode("Testing text in SVG");  
var text = document.createElementNS(xmlns, "text");
text.setAttributeNS(null, "font-size",'60');
text.setAttributeNS(null, "x", 2000);
text.setAttributeNS(null, "y", 100);
text.setAttributeNS(null, "fill", "black");
text.setAttributeNS(null, "text-anchor", "middle");
text.setAttributeNS(null, "id", "textLabel");
text.appendChild(data);
Root.appendChild(text);

不幸的是，一旦我放大 SVG，文本就不再可见，这是有道理的，因为 x 和 y 坐标是硬编码的。我该如何解决这个问题，因为无论我放大和缩小多少，我都希望文本始终在 SVG 的顶部中间区域可见？

谢谢！

Answer 1

尝试将您的文本元素添加到svg命名空间，而不是xmlns：

var text = document.createElementNS("http://www.w3.org/2000/svg", "text");

“硬编码”坐标无关紧要。如果元素添加正确，这些应该是相对于 svg 画布的坐标。