Question

我刚刚开始使用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>

CSS是这样的：

nav a {
text-align: center;
float: left;
width: 28.3%;
margin: 0 2.5% 0 2.5%;
}
.uls {
background: rgba(0, 0, 0, 0) url("../img/tab.svg") no-repeat center;
background-size: 100% 100%;
}

这是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>

以下是标准尺寸： Standard Size

这里缩小了尺寸： Reduced Size

使用SVG作为锚元素的背景

0 个答案: