用JS创建的SVG被剪裁

Question

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

生成此图片：

使用此代码生成：

this.$el = document.createElement('div');
document.body.appendChild(this.$el);
this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.$el.appendChild( this.$svg );
this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.$svg.appendChild(this.$circle);

this.$el.style.width = '25%';
this.$el.style.height = '100%';
this.$el.style.position = 'relative';
this.$el.style.backgroundColor = 'orange';

this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1');
this.$svg.setAttributeNS(null, 'width', '100%');
this.$svg.setAttributeNS(null, 'height', '100%');
this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet');

this.$circle.setAttributeNS(null, 'cx', '50%');
this.$circle.setAttributeNS(null, 'cy', '50%');
this.$circle.setAttributeNS(null, 'r', '50%');
this.$circle.setAttributeNS(null, 'fill', 'teal');

但是，当运行此代码并填充DOM时，它会呈现如下：

将完全相同的刚生成的SVG代码复制并粘贴到DOM中会按预期呈现SVG。这里发生了什么？如何让动态生成的SVG正确呈现？

以下是codepen的问题：

http://codepen.io/jedierikb/pen/VPzpwj

要查看渲染问题，请务必按＆＃39;展开代码段＆＃39;或者＆＃39;整页＆＃39;：

＆＃13;

＆＃13;

this.$el = document.createElement('div');
document.body.appendChild(this.$el);
this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.$el.appendChild( this.$svg );
this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.$svg.appendChild(this.$circle);

this.$el.style.width = '25%';
this.$el.style.height = '100%';
this.$el.style.position = 'relative';
this.$el.style.backgroundColor = 'orange';

this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1');
this.$svg.setAttributeNS(null, 'width', '100%');
this.$svg.setAttributeNS(null, 'height', '100%');
this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet');

this.$circle.setAttributeNS(null, 'cx', '50%');
this.$circle.setAttributeNS(null, 'cy', '50%');
this.$circle.setAttributeNS(null, 'r', '50%');
this.$circle.setAttributeNS(null, 'fill', 'teal');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

两件事。首先，您的百分比高度实际上并没有做任何事情，因为父元素（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(this.$el);
this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.$el.appendChild( this.$svg );
this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.$svg.appendChild(this.$circle);

this.$el.style.width = '25%';
this.$el.style.height = '100%';
this.$el.style.position = 'relative';
this.$el.style.backgroundColor = 'orange';

this.$svg.setAttributeNS(null, 'viewBox', '0 0 1 1');
this.$svg.setAttributeNS(null, 'width', '100%');
this.$svg.setAttributeNS(null, 'height', '100%');
this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet');

this.$circle.setAttributeNS(null, 'cx', '50%');
this.$circle.setAttributeNS(null, 'cy', '50%');
this.$circle.setAttributeNS(null, 'r', '50%');
this.$circle.setAttributeNS(null, 'fill', 'teal');

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