如何实现弧形梯形导航栏？SVG缩放及按钮添加问题咨询

问题1：SVG无法通过img标签正确缩放 #

你遇到的缩放问题根源在于SVG的viewBox和自身width/height属性不匹配，且用img引用SVG时，内容缩放受限于SVG内部的坐标体系。解决方式是直接将SVG内嵌到React组件中，而非通过img标签引用，同时修正viewBox让其匹配实际内容的尺寸：

修正后的SVG核心配置 #

原SVG的viewBox="0 0 300 300"是1:1的比例，但实际路径内容的高度仅为100（y轴从10到90）、宽度为300，所以将viewBox改为0 0 300 100，让SVG的坐标体系和内容尺寸匹配，后续缩放就能正常生效。

问题2：在导航栏内部添加按钮 #

img标签是位图式引用，无法在内部插入DOM元素。内嵌SVG后，可使用<foreignObject>标签嵌入HTML内容（比如按钮），该标签允许在SVG中插入任意HTML元素。

完整修改后的Example1.jsx代码 #

import React from 'react'

const Example1 = () => {
    return (
        <div style={{ border: "2px solid red", width: "600px" }}>
            {/* 内嵌SVG，直接控制尺寸 */}
            <svg 
                width="100%" 
                height="100px" 
                viewBox="0 0 300 100" 
                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" />
                
                {/* 嵌入HTML按钮，调整x/y/width/height控制位置和范围 */}
                <foreignObject x="50" y="20" width="200" height="60">
                    <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: "flex", gap: "16px", justifyContent: "center", alignItems: "center", height: "100%" }}>
                        <button style={{ padding: "8px 16px", backgroundColor: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}>按钮1</button>
                        <button style={{ padding: "8px 16px", backgroundColor: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}>按钮2</button>
                        <button style={{ padding: "8px 16px", backgroundColor: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}>按钮3</button>
                    </div>
                </foreignObject>
            </svg>
        </div>
    )
}

export default Example1

关键说明 #

1. 缩放控制：通过给SVG设置width="100%"让它自适应父容器宽度，height="100px"固定高度，结合修正后的viewBox，SVG内容会自动按比例缩放，不会出现容器变大但内容不变的情况。
2. 按钮嵌入：<foreignObject>的x/y属性控制内容的起始位置，width/height控制可插入区域的大小，内部的HTML元素按照常规CSS布局即可，这里用flex实现按钮的横向居中排列。

内容的提问来源于stack exchange，提问作者Shaun Serrao