Question

当我将插入的SVG换行时，我在正方形和十字之间有一个小缝隙，这是我不希望的。

我不知道它的来源，因为我的换行符没有高度。如果我将这些元素水平对齐，它们之间就没有间隙。

对于测试，您只能在开始处添加一个正方形，并且只能在交叉后添加正方形，并在正方形之后添加交叉。要插入正方形和十字形，只需按相应的按钮。编辑：“过渡”按钮尚未使用。

addSquare = function () {
  if (lastBlock != "square") {
    var svgSquare = document.createElementNS(svgns, "svg");
    var rect = document.createElementNS(svgns, "rect");

    svgSquare.setAttribute("aria-hidden", "true");
    svgSquare.setAttribute("viewbox", "0 0 100 100");
    svgSquare.setAttribute("width", "50px");
    svgSquare.setAttribute("height", "50px");

    rect.setAttribute("x", 1);
    rect.setAttribute("y", 1);
    rect.setAttribute("width", 49);
    rect.setAttribute("height", 49);
    rect.setAttribute("stroke", "#000");
    rect.setAttribute("fill", "none");
    rect.setAttribute("shape-rendering", "crispEdges");

    var data = document.createTextNode(stepNum);
    stepNum += 1;
    var text = document.createElementNS(svgns, "text");
    text.setAttributeNS(null, "x", "25");
    text.setAttributeNS(null, "y", "13");
    text.setAttributeNS(null, "fill", "green");
    text.setAttributeNS(null, "text-anchor", "middle");

    text.appendChild(data);
    svgSquare.appendChild(text);
    svgSquare.appendChild(rect);

    document.getElementById("grafcet").appendChild(svgSquare);
    lastBlock = "square";
    
    var lineBreak = document.createElement("hr");
    lineBreak.setAttribute("class","line-break");
    document.getElementById("grafcet").appendChild(lineBreak);
  } else {
    return;
  }
};

addCross = function () {
  if (lastBlock != "cross") {
    var svgCross = document.createElementNS(svgns, "svg");
    var path1 = document.createElementNS(svgns, "path");
    var path2 = document.createElementNS(svgns, "path");

    svgCross.setAttribute("aria-hidden", "true");
    svgCross.setAttribute("viewbox", "0 0 100 100");
    svgCross.setAttribute("width", "50px");
    svgCross.setAttribute("height", "50px");

    path1.setAttribute("d", "M 25,0 V 50");
    path1.setAttribute("stroke", "black");
    path1.setAttribute("stroke-width", "1");
    path1.setAttribute("stroke-opacity", "1");
    path1.setAttribute("shape-rendering", "crispEdges");

    path2.setAttribute("d", "M 0,25 H 50");
    path2.setAttribute("stroke", "black");
    path2.setAttribute("stroke-width", "1");
    path2.setAttribute("stroke-opacity", "1");
    path2.setAttribute("shape-rendering", "crispEdges");

    svgCross.appendChild(path1);
    svgCross.appendChild(path2);
    document.getElementById("grafcet").appendChild(svgCross);
    lastBlock = "cross";
    
    var lineBreak = document.createElement("hr");
    lineBreak.setAttribute("class","line-break");
    document.getElementById("grafcet").appendChild(lineBreak);
  } else {
    return;
  }
};
var lastBlock = "cross";
var stepNum = 0;
const svgns = "http://www.w3.org/2000/svg";

body {
  font-family: monospace;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
hr {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  border: 0;
}
.button {
  margin: 10px 10px 10px 0px;
}

<h1 id="title">Grafcet</h1>
<hr class="line-break"></hr>
<header>
  <button class="button" onclick="addSquare()">
    Add Square
  </button>
  <button class="button" onclick="addCross()">
    Add Cross
  </button>
  <button class="button" onclick="addTransition()">
    Add Transition
  </button>
</header>
<hr class="line-break"></hr>
<div id="grafcet"></div>

弹性项目之间的垂直间距

0 个答案: