0

我使用以下命令创建了一个 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 并没有覆盖它的父级的整个空间，为什么？
请帮助我，谢谢

4

2 回答 2

1

父节点需要指定一个高度，如果您希望它为 100%，则父节点也必须设置为 100%。如果您希望它填满屏幕，请将 html,body 设置为 100% 高度，同时设置子节点。

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

.parent{width:200px; height:200px; background:grey;}
于 2013-08-02T08:25:48.287 回答
1

将 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/

于 2013-08-02T17:22:32.587 回答