Entfernen der Lücke zwischen zwei SVG-Elementen

Question

Zwei SVG-Elemente a line und path werden vertikal gerendert. Es gibt eine Lücke zwischen diesen beiden Elementen, die ich gerne loswerden möchte, aber ich weiß nicht wie.

#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

Dies ist weiße Räume, so dass Sie einfach font-size:0 wie folgt hinzufügen:

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

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

<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

Sie die Vorteile der position und top Eigenschaften annehmen:

#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 3

SVG sind wie img, Inline-Block-Boxen, die Sie hier brauchen nur vertical-align zurückgesetzt werden, das zu vermeiden Spalt.

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

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

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