Question

很抱歉，这个问题可能是一个经典问题，但我尝试调试以下JS（我是SVG处理的初学者）：

第一次，我想创建一个SVG元素，我可以在其中放置文本。我在this link

上关注了这个例子

这就是我所做的：

HTML：

<div id="containerCanvas">
</div>

JAVASCRIPT：

var svgNS = "http://www.w3.org/2000/svg";
var x=1;
var y=2;
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x",x);     
newText.setAttributeNS(null,"y",y); 
newText.setAttributeNS(null,"font-size","20","fill","red");
newText.innerHTML = "Need help";
document.getElementById("containerCanvas").appendChild(newText);

CSS：

#containerCanvas{
position: relative;
top: 0;
left: 0;
margin: 20px;
}

不幸的是，jsfiddle的结果窗口中没有任何内容（我希望文字＆＃34;需要帮助＆＃34; font-size = 20和red color）。

任何人都可以看到出了什么问题？

Answer 1

仔细观察后，当前生成的html是：

<text x="1" y="2" font-size="20">Need help</text>

但是它应该用svg标签括起来，即：

<svg height="200" width="200">
  <text x="1" y="2" font-size="20" fill="black">Need help</text>
</svg>

更新了Js

var svgNS = "http://www.w3.org/2000/svg";
var x=30;
var y=20;

var svgEl = document.createElementNS(svgNS,"svg");
svgEl.setAttributeNS(null,"height",200);
svgEl.setAttributeNS(null,"width",200);
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x",x);     
newText.setAttributeNS(null,"y",y); 
newText.setAttributeNS(null,"font-size","20");
newText.setAttributeNS(null,"fill","red");
newText.innerHTML = "Need help";

svgEl.appendChild(newText);
document.getElementById("containerCanvas").appendChild(svgEl);

希望它有所帮助... https://jsfiddle.net/v4zhLgmL/20/

在div容器中添加SVG文本

1 个答案: