如何实现弯曲的梯形导航栏？

Question

我想在我的项目中实现这个组件，但我找不到太多好的方法来做到这一点。

我尝试了剪辑路径并得到了一个锋利的梯形。然后我尝试使用 SVG 路径属性并使用三次贝塞尔曲线的概念来实现这一点，我成功地做到了这一点。

svgImage.svg

<svg width="300" height="100" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 30 10 L 270 10 C 285 10 285 90 300 90 L 0 90 C 15 90 15 10 30 10" stroke="black" fill="#002D62" />
</svg>

示例1.jsx

import React from 'react'
import image from '../assets/svgImage.svg';

const Example1 = () => {
    return (
        <div style={{ border: "2px solid red" }}>
            <img style={{ border: "3px solid blue" }} src={image} height="100" width="600"/>
        </div>
    )
}

export default Example1

我面临的问题是最终图像太小，我无法使用 的 width 和 height 属性来增加它的高度或宽度。事实上，图像块的大小增加了，但图像却没有。另外，作为后续工作，我想在组件内实现按钮。

Answer 1

在我看来，最好的方法之一是使用

preserveAspectRatio

属性，利用向量的优势。

return (
    <div className="svg-container">
      <svg
        viewBox="0 0 769.51 86.94"
        preserveAspectRatio="none"
        className="svg-content"
      >
        <defs>
          <style>
            {`.cls-1 {
                        fill: #0a2733;
                        stroke: #2f819b;
                        stroke-miterlimit: 10;
                    }`}
          </style>
        </defs>
        <path
          className="cls-1"
          d="m708.59,63.9c-1.88-1.59-2.83-2.58-5.35-5.11-3.24-3.25-26.51-29.18-42.6-40.6-10.98-7.79-30.55-17.54-64.52-17.7H173.38c-33.97.16-53.54,9.91-64.52,17.7-16.08,11.42-39.35,37.35-42.6,40.6-2.52,2.52-3.47,3.51-5.35,5.11C37.92,83.4.5,85.54.5,85.95c0,.99,179.07.35,384.26-.68,205.18,1.03,384.25,1.66,384.26.68,0-.4-37.42-2.55-60.42-22.04Z"
        />
      </svg>
    </div>
  );

//

.svg-container {
  width: 100%;
  height: 100px;
}

.svg-content {
  width: 100%;
  height: 100%;
}

我忘了补充一点，稍后您还必须面对按钮的问题，因为这种方法当然会拉伸它们。但我认为摆脱这个问题要容易得多...