javascript - SVG 文本元素未在 Android 浏览器中显示

Question

我正在尝试使用下面的 javascript 代码将 svg 图形嵌入到我的页面中，但是当我在手机上使用名为“Internet”5.8 版的 android 默认浏览器查看网页时，显示的是圆圈，但显示的是文本没有出现。它在其他浏览器上运行良好，但我担心它可能不会在某些 safari 浏览器上显示。我在这里做错了什么？请注意，当我将输出的 svg 代码复制并粘贴到我的源文件中并打开它时，会显示文本，所以我很确定 javascript 存在一些问题。

var svgtag=document.createElementNS('http://www.w3.org/2000/svg','svg');
svgtag.setAttribute('height','500');
svgtag.setAttribute('width','500');
document.getElementById("piechart").appendChild(svgtag);

var circle=document.createElementNS('http://www.w3.org/2000/svg','circle');
circle.setAttribute('cx','250');
circle.setAttribute('cy','250');
circle.setAttribute('r','200');
circle.setAttribute('fill','#999');
svgtag.appendChild(circle);

var sample=document.createElementNS('http://www.w3.org/2000/svg','text');
sample.setAttribute('x','250');
sample.setAttribute('y','250');
sample.setAttribute('font-size','12');
sample.setAttribute('fill','#000');
sample.innerHTML='someting';
svgtag.appendChild(sample);

Answer 1

创建文本节点的常用方法是通过

text = document.createTextNode("someting");
sample.appendChild(text);

而不是 innerHTML

这应该适用于 Android 的默认浏览器，也适用于其他任何地方。