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和响应式方面，我建议您研究以下属性：

viewBox
preserveAspectRatio
矢量效果

示例：

SVG将水平响应，并锁定到1px的高度，占据屏幕宽度的50％。 viewBox允许SVG缩放，而saveAspectRatio允许其缩放而宽度和高度不锁定在一起。矢量效果可防止笔划缩放（将线保持在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>

更新

使用简单浮点的示例包括两个响应式和一个固定大小的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>

当窗口大小改变时，我想使虚线响应（适合窗口）？

1 个答案: