如何使这个SVG在不缩放的情况下适应视口大小？

Question

在参加了几门关于全堆栈开发和一些设计的课程之后，我终于胆敢开始一个小的、第一个我一直在考虑的项目。

这个小素描代表我希望我的导航看上去的样子。

我面临的问题是，我不知道如何使SVG路径像我所希望的那样突出导航范围(当旁边的线变小时，小小的ECG应该移动而不被压碎，检查图片以了解我的意思)。

这是SVG代码：

<svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000">
        <path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path>
    </g>
</g>

​

你们知道怎么处理这个问题吗？

Answer 1

正如我在上面评论的那样，您可以将元素保持固定的大宽度，并将其集中在容器中并使其溢出：

​

.container {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

svg {
  width: 1440px;
  height: 63px;
}

<div class="container">
  <div>
    <svg width="1440px" height="63px" viewBox="0 0 1440 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Desktop-HD" transform="translate(0.000000, -20.000000)" stroke="#000000">
        <path d="M0,75 L684.996099,75 C686.664718,71.6666667 688.332684,70 690,70 C691.667316,70 693.333982,71.6666667 695,75 L712.215347,75 L715,82.3654775 L720,20 L725,78.2084488 L726.833442,75 L745,75 C748.15577,68.3333333 751.489104,65 755,65 C758.510896,65 761.84423,68.3333333 765,75 L1440,75" id="Path-3"></path>
    </g>
</g>
</svg>
  </div>
</div>

​