Question

我使用此命令创建了一个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：

div.parent {
            width:500px;
            height:1000px;
            border:solid 1px black;
            border-radius:10px;
            margin:50px;
            background:radial-gradient(circle,white 95%,silver);
            box-shadow:0 0 10px black;
            overflow:hidden;
        }

HTML：

<div id="parent" class="parent"></div>

但是这个svg没有涵盖它的父母的整个空间，为什么？请帮帮我，谢谢

Answer 1

父级需要指定高度，如果您希望它为100％，父节点也必须100％设置它们。如果你想让它填满屏幕，请将html，body设置为100％高度以及子节点。

看看： http://jsfiddle.net/xLkf2/1/

.parent{width:200px; height:200px; background:grey;}

Answer 2

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

因此，如果您的内容占用0,0到300,200之间的区域，则SVG元素应如下所示：

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

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

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

我已修改您的示例以演示：

http://jsfiddle.net/du5tg/1/

SVG覆盖父母

2 个答案: