html - 我想让虚线在窗口大小发生变化时响应(适合窗口)？

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. View 框
2. 保留纵横比
3. 矢量效应

示例:

SVG 将水平响应，占据屏幕宽度的 50%，同时锁定到 1 像素的高度。 viewBox 允许 SVG 缩放，而 preserveAspectRatio 允许它在不将宽度和高度锁定在一起的情况下进行缩放。矢量效果可防止笔画缩放(将线条保持在 1px 高度)。我希望这可以为您指明正确的方向 :)

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

更新

使用简单 float 的示例，两个响应式 SVS 和一个固定大小的 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>