Question

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

在附加的代码中，您会发现我正在尝试编写字符串“你好吗？”使用appendChild()方法在SVG内部。但它不显示。我使用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>

Answer 1

我认为<text>内的<svg>元素需要x和y属性来显示文本（否则它们将默认为{ {1}}）。您可以在0：

中设置文字元素的属性

<script>

我确定这些值不是您想要的，但它们应该允许您查看插入的元素。

要删除的另一个错误来源 - 我会在myTextElement.setAttribute('x', '20'); myTextElement.setAttribute('y', '20');元素结束之前添加您的<script>标记，而不是在<body>内。我不确定，但是在脚本元素所在的位置，脚本运行时可能无法定义与<svg>对应的DOM元素。

Answer 2

改进text对演示的定位。

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用appendChild（）

2 个答案: