在下面的示例中，我有3个div：
我的问题是；
http://codepen.io/BradLee/pen/oxvQMN?editors=1010
<div></div>
<div>
<svg viewbox="0 0 24 24">
<path d="M2,14l6,6h12c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2L4,4C2.9,4,2,4.9,2,6V14z M9,18.5L3.5,13H9V18.5z"/>
<path fill="none" d="M0,0h24v24H0V0z"/>
</svg>
</div>
<div class="svgAppendDiv"></div>
div{
display: inline-block;
margin-left: 100px;
background-color: tomato;
width: 300px;
height: 300px;
}
var myDiv = document.querySelector(`.svgAppendDiv`);
function createElement () {
let svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svg.setAttribute(`xmlns`, `http://www.w3.org/2000/svg`);
svg.setAttribute(`viewbox`, `0 0 24 24`);
svg.setAttribute(`preserveAspectRatio`, `none`);
let path = document.createElementNS("http://www.w3.org/2000/svg","path");
path.setAttribute("d", "M2,14l6,6h12c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2L4,4C2.9,4,2,4.9,2,6V14z M9,18.5L3.5,13H9V18.5z");
svg.appendChild(path);
myDiv.appendChild(svg);
};
createElement();
为什么第二个SVG向下推页面？
这是由于CSS与所包含的一种样式表之间的交互（material.blue-amber.min.css）引起的
您正在重新定义<div>为inline-block，而样式表已设置<svg>为具有vertical-align: middle。
要覆盖它，请将以下规则添加到CSS中以重置对齐方式。
svg {
vertical-align: baseline;
}
默认情况下，SVG的宽度和高度为100％，因此，如果将SVG放入容器中，则应拉伸以填充该容器。但是，当我通过JS附加SVG时，它没有。
您拼写viewBox错误。SVG中的属性区分大小写。如果您解决了该问题，它将起作用。
更新的代码笔：http ://codepen.io/anon/pen/NNjRva
顺便说一句
您在某些JS中使用反引号而不是单引号。这将在最近的浏览器版本中起作用。但是，如果要编写需要在较旧的浏览器中运行的代码，则可能要避免养成它的习惯。
您不需要像您所做的那样显式设置xmlns属性。使用时为您完成createElementNS()。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句