Javascript SVG覆盖父对象

我使用以下命令创建了一个svg标记：

var NS = "http://www.w3.org/2000/svg";
var elem = document.createElementNS(NS, "svg");
elem.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
elem.setAttribute("width", "100%");
elem.setAttribute("height", "100%");
parent = document.getElementById("parent");
parent.appendChild(elem);

CSS:

HTML:

但是这个svg并没有覆盖它的父对象的整个空间，为什么？

---

请帮助我，谢谢

父节点需要指定一个高度，如果希望它为100%，父节点也必须设置为100%。如果希望它填充屏幕，请将html、body和子节点设置为100%高度

看看：

---

将viewBox属性设置为内容的大小。请注意，viewBox中不允许使用百分比值。还请注意，viewBox区分大小写-它有一个大写的“B”

因此，如果您的内容占据0,0到300200的区域，SVG元素应该如下所示：

<svg width="100%" height="100%" viewBox="0 0 300 200">

然后应缩放SVG以填充其容器。或者，更准确地说，它将按比例放大，使其适合容器内部，但保持其纵横比。如果您的容器是不同的形状（纵横比），并且您希望将其水平和垂直拉伸以精确匹配，请使用：

<svg width="100%" height="100%" viewBox="0 0 300 200" preservAspectRatio="none">

我修改了您的示例，以演示：

---

看来我的svg在你的小提琴中的宽度和高度为0嘿！在铬，检查元素我得到100%的w和高度。你用的是什么浏览器？奇怪的是，在firefox中，它似乎是图形的大小：因此你可以在容器内绘制一个框，它将是100%，你确定吗？因为这一切似乎都在起作用properly@MaxMarkson：请查看此提琴，因为您可以看到svg没有覆盖它的父对象：如果您使用

var r=rect（100,50，“蓝色”）我认为这是逻辑，rect不覆盖整个父对象，如果您对蓝色矩形使用正确的大小，您将看到整个父对象covered@MaxMarkson：我想让SVG覆盖它的父对象而不是rect是的，这很明显，但是如果SVG中的rect填充了div，那么很明显，即使SVG也覆盖了整个父对象。如果没有，rect将不会覆盖父对象。感谢您的回复，我认为这是Firefox的一个错误，因为似乎没有办法解决这个问题，viewBox属性中的百分比值也可以，再次感谢。你错了。百分比值仅对“长度”类型的值有效。viewBox属性被定义为“viewBox属性的值是一个由四个数字组成的列表…”。我的小提琴版本在FF22中运行良好，所以我不知道你的意思。
.parent{width:200px; height:200px; background:grey;}

<svg width="100%" height="100%" viewBox="0 0 300 200">

<svg width="100%" height="100%" viewBox="0 0 300 200" preservAspectRatio="none">