javascript - 附加 svg 并拉伸(stretch)到父级

Question

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

• 第一个是空 div，
• 第二个有一个内联 SVG 作为子项并且
• 第三个是一个空 div，通过 JS 附加了一个 SVG。

我的问题是；

1. 为什么第二个 SVG 被推到页面下方？我只是将 SVG 放入 div 中，没有更改边距。
2. 默认情况下，SVG 宽度和高度为 100%，因此，如果将 SVG 放入容器中，它应该拉伸(stretch)以填充该容器。然而，当我通过 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

Why is the 2nd SVG pushed down the page?

这是由于您的 CSS 与您所包含的样式表之一 (material.blue-amber.min.css) 之间的交互造成的

您正在重新定义<div>成为inline-block ，样式表设置 <svg>有vertical-align: middle .

要覆盖该规则，请将以下规则添加到 CSS 中以重置对齐方式。

svg {
    vertical-align: baseline;
}

By default, an SVG width and height are 100%, therefore if you put an SVG into a container it should stretch to fill that container. However when I append an SVG through JS it doesn't.

您拼写了 viewBox错误地。 SVG 中的属性区分大小写。如果你解决了这个问题，它就会起作用。

更新的代码笔:http://codepen.io/anon/pen/NNjRva

也作为旁白

1. 您在某些 JS 中使用了反引号而不是单引号。这适用于最新的浏览器版本。但如果您正在编写需要在较旧的浏览器中运行的代码，您可能希望避免养成这种习惯。

2. 您不需要像现在一样显式设置 xmlns 属性。当您使用 createElementNS() 时，它就为您完成了.