将 svg 和拉伸附加到父级答案

【问题标题】：appending svg and stretching to parent将 svg 和拉伸附加到父级
【发布时间】：2016-03-23 12:11:36
【问题描述】：

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

第一个是空的 div，
第二个小时候有一个内联 SVG，并且
第三个是一个空的 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();

【问题讨论】：

标签： javascript svg

【解决方案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 中的属性区分大小写。如果你解决了这个问题，它会起作用的。

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

顺便说一句

您在某些 JS 中使用了反引号而不是单引号。这将在最近的浏览器版本中工作。但是，如果您正在编写需要在旧版浏览器中运行的代码，您可能希望避免养成这种习惯。
您不需要像现在这样明确设置 xmlns 属性。当您使用createElementNS() 时，它就为您完成了。

【讨论】：