使用 appendChild() 在 svg 中放置文本答案

【问题标题】：Placing text inside svg using appendChild()使用 appendChild() 在 svg 中放置文本
【发布时间】：2017-08-03 05:00:32
【问题描述】：

我正在尝试使用 appendChild() 方法在 SVG 中插入文本。我需要将这种方法用于我正在编写的实际代码。

在附加的代码中，您会发现我正在尝试编写字符串“你好吗？”在 SVG 中使用 appendChild() 方法。但是它不显示。我使用 Chrome 开发者工具检查了执行情况，myTextElement 和 myText 实际上是在代码中执行的。不过，我不明白为什么它没有被显示。你能帮忙吗？

var mysvg = document.getElementById("mysvg")
var myTextElement = document.createElement("text");
var myText = document.createTextNode("How are you?")

myTextElement.appendChild(myText);
mysvg.appendChild(myTextElement);

circle {
  fill-opacity: 0.5;
  stroke-width: 4;
  fill: #3080d0;
  stroke: #3080d0;
  opacity: 0.6;
}

<svg id="mysvg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <circle id="my-circle" cx="100" cy="100" r="50" />
  <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
</svg>

【问题讨论】：

见this answer，你需要一个有效的命名空间。
谢谢，瓦迪姆和亚当。在过去的 36 小时里，我都快崩溃了。

标签： javascript html css svg

【解决方案1】：

为演示改进了text 的定位。

var mysvg = document.getElementById("mysvg");

var myTextElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
var myText = document.createTextNode("How are you?");
myTextElement.setAttribute("x", "0");
myTextElement.setAttribute("y", "110");
myTextElement.setAttribute("fill", "blue");
myTextElement.setAttribute("font-family", "Verdana");
myTextElement.setAttribute("font-size", "55");

myTextElement.appendChild(myText);
mysvg.appendChild(myTextElement);

circle {
  fill-opacity: 0.5;
  stroke-width: 4;
  fill: #3080d0;
  stroke: #3080d0;
  opacity: 0.6;
}

<svg id="mysvg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <circle id="my-circle" cx="100" cy="100" r="50" />
  <text x="0" y="55" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
</svg>

【讨论】：

【解决方案2】：

在我看来，<svg> 中的 <text> 元素需要 x 和 y 属性来显示文本（否则它们将默认为 0）。您可以在<script> 中设置文本元素的属性：

myTextElement.setAttribute('x', '20');
myTextElement.setAttribute('y', '20');

我确信这些值不会是你想要的，但它们应该能让你看到你插入的元素。

要删除的另一个错误来源 - 我会在 <body> 元素的末尾添加您的 <script> 标记，而不是在您的 <svg> 内。我不确定，但是对于您的脚本元素所在的位置，与您的 <svg> 对应的 DOM 元素可能在您的脚本运行时未定义。

【讨论】：