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

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

user_1292848 · Answer

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

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

1 Answers