Html 使用SVG作为锚元素的背景

我刚开始从事web开发，正在尝试构建一个简单的选项卡式网站。我需要一个svg来完美地安装在所有屏幕尺寸的锚元素后面，但它在较小的尺寸时会缩小。 这是我的HTML：

            <div id="seconddiv">
                <h1>Example</h1>
                <nav>
                    <a class="uls" href="index.html"><p>HOME</p></a>
                    <a class="ul" href="booking.html"><p>BOOK NOW</p></a>
                    <a class="ul" href="contact.html"><p>CONTACT US</p></a>
                </nav>  
            </div>  

这是svg：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 957 286"
style="enable-background:new 0 0 957 286;" preserveAspectRatio="none">
<path id="Selector" style="opacity:0.5;"   
d="M0.5,0.351l0.042,0.083c68.195,1.743,84.244,55.248,97.075,
124.907l28.816,124.17c3.923,19.925,16.566,36.839,
36.814,36.839h628.131c20.248,0,33.468-16.507,
36.814-36.839h- 0.009L857,125.342
c13.045-70.825,29.376-124.99,100.5-124.99H0.5z"/>
</svg>

以下是标准尺寸的外观：

以下是缩小的尺寸：

---

与屏幕宽度相关的

a

元素上是否有任何宽度或填充物（即百分比）？tab.svg是否在根元素上具有PreserveSpectratio属性。设置为什么？请尝试PreserveSpectratio=“none”@MrLister是的，“a”元素的宽度设置为父nav的28.3%。@RobertLongson我尝试添加PreserveSpectratio=“none”，但似乎不起作用。如果看不到tab.svg，很难在这里进一步了解。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 957 286"
style="enable-background:new 0 0 957 286;" preserveAspectRatio="none">
<path id="Selector" style="opacity:0.5;"   
d="M0.5,0.351l0.042,0.083c68.195,1.743,84.244,55.248,97.075,
124.907l28.816,124.17c3.923,19.925,16.566,36.839,
36.814,36.839h628.131c20.248,0,33.468-16.507,
36.814-36.839h- 0.009L857,125.342
c13.045-70.825,29.376-124.99,100.5-124.99H0.5z"/>
</svg>