Javascript 使用JS创建的SVG被剪裁

此svg代码：

<div style="width: 25%; height: 100%; position: relative; background-color: orange;">
  <svg viewbox="0 0 1 1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <circle cx="50%" cy="50%" r="50%" fill="teal" style="pointer-events: all;">
    </circle>
  </svg>
</div>

但是，当运行此代码并填充DOM时，其呈现方式如下：

将刚刚生成的完全相同的SVG代码复制并粘贴到DOM中，将按预期呈现SVG。这是怎么回事？如何使动态生成的SVG正确呈现

以下是codepen的问题：

---

要查看呈现问题，请确保按“展开代码段”或“完整页面”：

this.$el=document.createElement（'div'）；
document.body.appendChild（此$el）；
此.svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
this.el.appendChild（this.svg）；
此.$circle=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
this.$svg.appendChild（this.$circle）；
这个.$el.style.width='25%'；
这个.$el.style.height='100%'；
此.$el.style.position='relative'；
这个.$el.style.backgroundColor='橙色'；
这是.svg.setAttributeNS（null，'viewbox'，'0 1'）；
这个.svg.setAttributeNS（null，'width'，'100%'）；
这是.svg.setAttributeNS（null，“height”，“100%”）；
这是.$svg.setAttributeNS（null，'preserveSpectratio'，'xMidYMid-meet'）；
这是.$circle.setAttributeNS（null，'cx'，'50%'）；
这是.$circle.setAttributeNS（null，'cy'，'50%）；
这是.$circle.setAttributeNS（null，'r'，'50%）；
这是.$circle.setAttributeNS（null，'fill'，'teal'）
两件事。首先，由于父元素（body和html）没有指定的高度，所以百分比高度实际上没有任何作用。然而，由于这两个例子都是一致的，这并不是差异的根源。您在此行中有一个大写错误：

this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1');

应该是

this.$svg.setAttributeNS(null, 'viewBox', '0 0 1 1');

请参见您的示例中所做的更改：


this.$el=document.createElement（'div'）；
document.body.appendChild（此$el）；
此.svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
this.el.appendChild（this.svg）；
此.$circle=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
this.$svg.appendChild（this.$circle）；
这个.$el.style.width='25%'；
这个.$el.style.height='100%'；
此.$el.style.position='relative'；
这个.$el.style.backgroundColor='橙色'；
这是.svg.setAttributeNS（null，'viewBox'，'0 1'）；
这个.svg.setAttributeNS（null，'width'，'100%'）；
这是.svg.setAttributeNS（null，“height”，“100%”）；
这是.$svg.setAttributeNS（null，'preserveSpectratio'，'xMidYMid-meet'）；
这是.$circle.setAttributeNS（null，'cx'，'50%'）；
这是.$circle.setAttributeNS（null，'cy'，'50%）；
这是.$circle.setAttributeNS（null，'r'，'50%）；
这是.$circle.setAttributeNS（null，'fill'，'teal'）

我看到与您的代码相同的圆圈，在OSX Chrome 55.0.2883.95版（64位）上按预期显示snippet@haxxxton点击“扩展代码段”或“全屏”。我不知道为什么它会在文章中正确呈现……有趣的是，提供的svg中的大写字母不会引起任何问题——只有js构建的问题。为什么会这样？@jedierikb我怀疑是因为（某些浏览器）在构建DOM时更正了内联属性的大小写。您可以通过执行类似于
someEl.innerHTML=''
的操作来测试这一点。生成的DOM节点将是
。但是，如果使用JS将属性直接应用于节点，则不会发生这种情况。现在我想到了，svg使用区分大小写的camelcase属性是非常奇怪的。我很想听到一些更深入的解释，说明这是怎么发生的。
this.$svg.setAttributeNS(null, 'viewBox', '0 0 1 1');