Как создать адаптивную вложенную строку SVG относительно других элементов?

Question

У меня есть вложенный SVG с 3 элементами. 2 треугольника, расположенных справа и слева, и одна линия посередине. Я хотел бы получить отзывчивую линию (линия должна иметь ширину только между треугольниками) как при изменении размера по горизонтали, так и по вертикали.

Я попытался установить ширину в процентах, но работает только при изменении размера по горизонтали. Когда я изменяю размер по вертикали, это не работает, потому что изменяется ширина треугольников. 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>

_{Свободный перевод вопроса How can I create responsive nested SVG line relative to other elements? от участника @Razvan Pop.}

Answer 1

Самый простой и легкий подход для реализации и понимания - это, вероятно, просто использовать 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>

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

Как создать адаптивную вложенную строку SVG относительно других элементов?

Ответы (1 шт):