я хочу сделать пунктирные линии отзывчивыми (подходит к окну) при изменении размера окна?

Question

Когда я уменьшаю размер окна, он имеет одинаковую ширину и высоту.Я использую эти пунктирные линии для инструкций.Эта пунктирная линия лежит между двумя элементами div (скажем, прямоугольниками).моё требование - сделать корректировку между этими двумя div'ами соответствующим образом.посещение https://codepen.io/himabindukalla/pen/pBWLRP?

<svg height="80" width="300" class="pausedLine layout horizontal ">
          <g fill="none" stroke="black" stroke-width="2">
            <path stroke-dasharray="12,12" d="M5 40 l450 0" />
          </g>
        </svg>
        <svg height="80" width="300" class="diceLine">
          <g fill="none" stroke="black" stroke-width="2">
            <path stroke-dasharray="12,12" d="M5 40 l250 0" />
          </g>
        </svg>

        <svg height="120" width="300" class="crossedLine">
          <g fill="none" stroke="black" stroke-width="2">
            <path stroke-dasharray="12,12" d="M5 40 l250 555" />
          </g>
        </svg>

Answer 1

Немного неясно, как вы хотите, чтобы все это действовало вместе, но когда дело доходит до SVS и отзывчивости, я рекомендую вам взглянуть на следующие атрибуты:

1. viewBox
2. preserveAspectRatio
3. вектор-эффект

Пример:

SVG будет реагировать по горизонтали, занимая 50% ширины экрана, при этом он будет зафиксирован на высоте 1 пикселя. ViewBox позволяет масштабировать SVG, а preserveAspectRatio позволяет масштабировать без блокировки ширины и высоты. Эффект вектора предотвращает масштабирование обводки (удерживая линию на высоте 1 пикселя). Я надеюсь, что это может указать вам правильное направление :)

<svg height="1" width="50%" viewBox="0 0 12 1" preserveAspectRatio="none">
  <path d="M0 0 l12 0" 
        stroke="black" 
        stroke-width="1" 
        stroke-dasharray="6,6" 
        vector-effect="non-scaling-stroke"
        />
</svg>

Обновление

Пример использования простых чисел с плавающей запятой, двух реагирующих и одного фиксированного размера SVS

svg, div {
  float: left;
  clear: left;
}
.dia {
  position:relative;
  left: 25%;
}

<svg class="top" height="1" width="50%" viewBox="0 0 12 1" preserveAspectRatio="none">
  <path d="M0 0 l12 0" 
        stroke="black" 
        stroke-width="1" 
        stroke-dasharray="6,6" 
        vector-effect="non-scaling-stroke"
        />
</svg>
<div>
  CONTENT
</div>
<svg class="bot" height="1" width="50%" viewBox="0 0 12 1" preserveAspectRatio="none">
  <path d="M0 0 l12 0" 
        stroke="black" 
        stroke-width="1" 
        stroke-dasharray="6,6" 
        vector-effect="non-scaling-stroke"
        />
</svg>
<svg class="dia" height="24" width="24">
  <path d="M0 0 l18 24" 
        stroke="black" 
        stroke-width="1" 
        stroke-dasharray="6,6" 
        vector-effect="non-scaling-stroke"
        />
</svg>