小编Wil*_*yte的帖子

无法在"节点"上执行"appendChild":只允许文档中的一个元素

我正在尝试加载外部svg文件,然后在其上面写入其他SVG元素.当我这样做时,我在"节点"上收到错误"无法执行'appendChild':文档上只允许一个元素." 当我在Chrome中检查时.

这是HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Hello World</title>
  </head>
  <body>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="mySvg">
        <circle cx="40" cy="30" r="15" fill="#FF00FF"
          stroke="#000000" stroke-width="2" />
      </svg>
      <object data="img/drawing.svg" type="image/svg+xml"
        align="center" id="svgDrw" height="80vh"></object>
    <script type="text/javascript" src="js/problem.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是问题.js:

var svgXtraDoc;
var d = document.getElementById("svgDrw");

d.addEventListener("load",function(){

  // get the inner DOM 
  svgXtraDoc = d.contentDocument;
  // get the inner element by id
  svgRect1 = svgXtraDoc.getElementById("MyRect1");
  svgRect2 = svgXtraDoc.getElementById("MyRect2");
}, false);


function addRect() {
  var svgRect = document.createElementNS("http://www.w3.org/2000/svg", 
    "rect");
  svgRect.setAttribute("x", 100);
  svgRect.setAttribute("y", 100); …

Run Code Online (Sandbox Code Playgroud)

javascript svg

Wil*_*yte

2016 12-23

25
推荐指数

2
解决办法

2万
查看次数

最大可能尺寸的图像和div扩展以填充空间

我确信以前曾经问过,但我找不到确切问题的答案.

我想要一个非常简单的布局:

-------------------
      header
-------------------
         |
 content | graphic
         |
-------------------

Run Code Online (Sandbox Code Playgroud)

哪里:

标题高度由字体大小设置;
内容具有固定的最小宽度;
考虑到这两个约束并保持纵横比,图形尽可能大(即它将与屏幕一样高,减去标题,除非这会使内容面板太窄);
考虑到这三个限制,内容尽可能宽.

[编辑添加:]

垂直:当宽度+宽高比约束导致它比最大高度短时,图像垂直居中
水平:图像总是很难对着屏幕的右侧(除了任何手动添加的填充),内容总是一直向上到图像的左侧(除了任何手动添加的填充之外).

我已经尝试过使用flexbox并且满足前三个约束,但是我无法让内容窗格水平增长以填充图像未使用的空间.我得到的最好的结果是使用下面的HTML和CSS,但正如您在下面的屏幕截图中看到的,这导致内容div和图像占用相同的大小而不是内容div将图像推向右侧.(这是两者都设置flex = 1的预期行为,所以我没想到它会起作用;但至少这给我的图像大小表现得我喜欢).

我正在使用的是https://jsfiddle.net/uv566jc3/:

.grid {
  border: solid 1px #e7e7e7;
  height: 95vh;
  display: flex;
  flex-direction: column;
}
.header {
  flex: 0;
}
.grid__row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.grid__item {
  flex: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
}
img {
  flex: 1;
  object-fit: contain;
  overflow: hidden;
  border: solid 1px #e7e7e7;
}

Run Code Online (Sandbox Code Playgroud)