How can I create responsive nested SVG line relative to other elements? - html

Question

I have a nested SVG with 3 elements. 2 triangles that are positioned at the right-left sides and one line in the middle. I would like to obtain a responsive line (line should only have the width available between the triangles), both when resizing horizontally and vertically. I have tried setting the width in percentage but in only works when resizing horizontally. When I am resizing vertically it doesn't work because the width of the triangles changes. Here is a codepen link: https://codepen.io/roppazvan/pen/dyyPKKL?editors=1100
<svg
class='input-source'
stroke='black'
stroke-width='0'
fill="black">
<rect x="20" y="20%" width="100%" height="60%"
stroke='black'
stroke-width='0'
>
</rect>
<!-- The right head -->
<svg class='head input-source' id='right'
height="100%"
width='100%'
viewBox="0 0 20 40"
preserveAspectRatio="xMaxYMid"
>
<rect width="100%" height="100%"/>
</svg>
<!-- The left head -->
<svg class='head input-source' id='left'
height="100%"
width='100%'
viewBox="0 0 15 30"
preserveAspectRatio="xMinYMid"
>
<rect width="100%" height="100%"/>
</svg>
</svg>
</svg>
<svg width="110px" height="40px" version="1.0" state='normal'>
<svg
class='input-source'
stroke='black'
stroke-width='0'
fill="black">
<rect x="20" y="20%" width="100%" height="60%"
stroke='black'
stroke-width='0'
>
</rect>
<!-- The right head -->
<svg class='head input-source' id='right'
height="100%"
width='100%'
viewBox="0 0 20 40"
preserveAspectRatio="xMaxYMid"
>
<rect width="100%" height="100%"/>
</svg>
<!-- The left head -->
<svg class='head input-source' id='left'
height="100%"
width='100%'
viewBox="0 0 15 30"
preserveAspectRatio="xMinYMid"
>
<rect width="100%" height="100%"/>
</svg>
</svg>
</svg>

Answer 1

The simplest and easiest approach to implement and understand, is probably to just use flex-box.
#svg-container {
margin-top: 100px;
width: 100%;
border: 1px solid #bada55;
display: flex;
flex-direction: row;
}
svg {
height: 10vh;
}
/* stretch the middle box */
svg:nth-child(2) {
flex: 1;
}
<div id="svg-container">
<!-- left head -->
<svg viewBox="0 0 14 14" preserveAspectRatio="xMinYMid" opacity="0.5">
<polygon points="0,7 14,0 14,14 " />
</svg>
<!-- line -->
<svg viewBox="0 0 14 14" preserveAspectRatio="none">
<rect y="30%" width="100%" height="40%" />
</svg>
<!-- right head -->
<svg viewBox="0 0 14 14" preserveAspectRatio="xMaxYMid" opacity="0.5">
<polygon points="14,7 0,0 0,14 "/>
</svg>
</div>