Question

在下面的示例中，我有3个div：

第一个是空div，
第二个有一个内联SVG作为孩子和
第3个是一个空的div，它通过JS附加了一个SVG。

我的问题是;

为什么第二个SVG被推下页面？我只是将一个SVG放在一个div中，没有任何边距被改变。
默认情况下，SVG的宽度和高度是100％，因此如果您将SVG放入容器中，它应该拉伸以填充该容器。但是，当我通过JS追加SVG时，它并没有。

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();

Answer 1

为什么第二个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中的属性区分大小写。如果你解决了这个问题，那就行了。

更新了codepen：http://codepen.io/anon/pen/NNjRva

另外

您在某些JS中使用了反向刻度而不是单引号。这适用于最近的浏览器版本。但是，如果您正在编写需要在旧版浏览器中运行的代码，您可能希望避免养成习惯。
您无需像执行任何操作那样明确设置xmlns属性。当您使用createElementNS()。

附加svg并延伸到父母

1 个答案: