javascript - SVG 封面父级

标签 javascript css 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:

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 并没有覆盖它父级的整个空间,为什么?
请帮助我,谢谢

最佳答案

父节点需要指定一个高度,如果你希望它是 100%,父节点也必须设置为 100%。如果你想让它填满屏幕,将 html,body 和子节点设置为 100% 高度。

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

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

关于javascript - SVG 封面父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18011882/

相关文章:

css - 菜单中的下拉导航隐藏在 WordPress 的另一个下拉菜单下

HTML 电子邮件 : 3 column images on mobile - Rounding down issue

html - 我在滚动时遇到困难

html - 在 RaphaelJS 中自动将文本换行到一定宽度?

javascript - jStorage 问题在 http 和 https 中持续存在

javascript - 使用 fs.writefilesync 写入 NodeJS 中的文件

browser - SVG坐标的精度?

internet-explorer - SVG动画无法在IE9/IE10上运行

javascript - 如何判断浏览器运行时运行的 React 版本?

javascript - SVG 文档中的 Gecko/Firefox 缺少 document.getElementsByName