消除两个svg元素之间的差距

Question

垂直渲染两个svg元素line和path。这两个元素之间存在差距，我想摆脱它，但我不知道如何。

#upload-line-join {
  position: relative;
  left: 47px;
}

.svg-lines-wrapper {
  width: 97px;
}

<div class="svg-lines-wrapper">
  <svg id="upload-play-vert-line" width="97" height="60">
    <line
      id="vert-line-1"
      x1="49.4"
      y1="0"
      x2="49.4"
      y2="60"
      stroke="#7e7e7e"
      stroke-width="2"
    />
  </svg>
  <svg id="upload-line-join" fill="none" height="15" width="15" viewBox="-1.3 0 15 15">
    <path
      id="vert-line-2"
      d="M 11, 10 C 5, 10, 1, 6, 1, 0"
      stroke="#7e7e7e"
      stroke-width="2"
    />
  </svg>
</div>

jsfiddle

Answer 1

您可以利用position和top属性：

#upload-line-join {
  position: relative;
  left: 47px;
}

.svg-lines-wrapper {
  width: 97px;
}

.svg-lines-wrapper > svg:nth-child(2) {
  position: relative;
  top: -5px;
}

<div class="svg-lines-wrapper">
                <svg id="upload-play-vert-line" width="97" height="60">
                  <line
                    id="vert-line-1"
                    x1="49.4"
                    y1="0"
                    x2="49.4"
                    y2="60"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
                <svg id="upload-line-join" fill="none" height="15" width="15" viewBox="-1.3 0 15 15">
                  <path
                    id="vert-line-2"
                    d="M 11, 10 C 5, 10, 1, 6, 1, 0"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
              </div>

Answer 2

这是空格，因此您只需添加font-size:0，就像这样：

＆＃13;

＆＃13;

#upload-line-join {
  position: relative;
  left: 47px;
}

.svg-lines-wrapper {
  width: 97px;
  font-size: 0;
}

＆＃13;

<div class="svg-lines-wrapper">
  <svg id="upload-play-vert-line" width="97" height="60">
                  <line
                    id="vert-line-1"
                    x1="49.4"
                    y1="0"
                    x2="49.4"
                    y2="60"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
  <svg id="upload-line-join" fill="none" height="15" width="15" viewBox="-1.3 0 15 15">
                  <path
                    id="vert-line-2"
                    d="M 11, 10 C 5, 10, 1, 6, 1, 0"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

SVG就像img，inline-block box，你只需要重置vertical-align以避免这种差距。

＆＃13;

＆＃13;

#upload-line-join {
  position: relative;
  left: 47px;
}

.svg-lines-wrapper {
  width: 97px;
}
svg {vertical-align:top;}

＆＃13;

<div class="svg-lines-wrapper">
  <svg id="upload-play-vert-line" width="97" height="60">
                  <line
                    id="vert-line-1"
                    x1="49.4"
                    y1="0"
                    x2="49.4"
                    y2="60"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
  <svg id="upload-line-join" fill="none" height="15" width="15" viewBox="-1.3 0 15 15">
                  <path
                    id="vert-line-2"
                    d="M 11, 10 C 5, 10, 1, 6, 1, 0"
                    stroke="#7e7e7e"
                    stroke-width="2"
                  />
                </svg>
</div>

＆＃13;

＆＃13;

＆＃13;