在学习了一些关于全栈开发和一些设计的类(class)后,我终于敢于开始我考虑了一段时间的第一个小元素。
这small sketch表示我希望导航的外观。
我面临的问题是我不知道如何制作强调导航比例的 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>
你们知道如何处理这个问题吗?
最佳答案
正如我在上面评论的那样,你可以让你的元素保持一个固定的大宽度,并将它放在容器的中心并使其溢出:
.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>
关于javascript - 如何让这个 SVG 在不缩放的情况下适应视口(viewport)大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49334017/