【问题标题】：Dynamically created SVG is rendered into HTML but not displayed properly [duplicate]动态创建的 SVG 被渲染成 HTML 但无法正确显示 [重复]
【发布时间】：2019-05-23 09:23:03
【问题描述】：

我正在动态创建一个 SVG 元素并将其附加到页面中的另一个元素。该页面显示 SVG 元素，该元素是写入文件中的 HTML DOM 的一部分，但它不显示从 Javascript 动态创建的元素。

我检查了呈现的 HTML 输出，发现动态创建的 SVG 与 HTML 文件中指定的 SVG 没有区别。

var out = document.getElementById("output");
var svg = document.createElement("svg");
svg.setAttribute("width",50);
svg.setAttribute("height",50);
svg.setAttribute("style","background-color:#bada55");
svg.innerHTML = "why is this not displayed as SVG?";
out.appendChild(svg);

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
</div>

我做错了什么？

编辑：

PS：我使用的是 Chrome，我看到输出的方式是：米色 SVG 被正确渲染，里面没有文本。绿色 SVG（动态创建）看起来好像是 <span>，其中包含文本。

这是我看到的图像：

这里是渲染的 HTML：

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
  <svg width="50" height="50" style="background-color:#bada55">why is this not displayed as SVG?</svg>
</div>

【问题讨论】：

@Mamun 除了样式颜色之外，为了问题的目的而有所不同
@Mamun 我添加了渲染的 HTML
使用您的代码，您希望如何呈现第二个 svg？
输出应该是两个正方形，一个米色，一个绿色。我看到第一个米色正方形，但另一个是绿色矩形，里面有文字@Mamun
这里有什么问题？高度和宽度困扰你吗？

标签： javascript html svg

【解决方案1】：

使用createElementNS 会解决您的问题。

var out = document.getElementById("output");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'background-color:#bada55');
svg.setAttribute('width', '50');
svg.setAttribute('height', '50');
svg.innerHTML = "why is this not displayed as SVG?";
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

out.appendChild(svg);

<div id="output">
  <svg width="50" height="50" style="background-color:beige">This one is OK</svg>
</div>

【讨论】：