使用svg創建全寬導航

Question

我正在嘗試使用SVG創建this nav。我被提供了一個SVG，但它沒有解決，所以有人幫助我做出了另一個。但是現在我不確定如何創建使用

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" 
    width="576" height="152" viewbox="0 0 576 152"> 
    <path transform="translate(10,-185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10" fill="transparent" /> 
</svg> 

我目前的資產淨值資產淨值看起來像

<nav> 
    <ul> 
     <li class="completed"><a href="#">Exam</a> <i class="fa fa-check-circle"></i></li> 
     <li><a href="#">Personal <i class="fa fa-times-circle"></i></a></li> 
     <li><a href="#">Employment</a></li> 
     <li><a href="#">Appointment</a></li> 
     <li><a href="#">Record Check</a></li> 
     <li><a href="#">Submit</a></li> 
    </ul> 
</nav> 

只需一個白色背景。所以它看起來接近於圖像看起來像減去SVG形狀。

Answer 1

首先，你的SVG需要一點點的變化來校準自己（與preserveAspectRatio="none"）和一些更適應您的具體佈局：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="576" height="152" viewbox="0 0 576 152" preserveAspectRatio="none"> 
    <path transform="translate(10, -185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-opacity="0.1" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" fill="white" /> 
</svg> 

下面是使用它的CSS：

nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: flex; 
    flex-flow: row wrap; 
} 

nav li { 
    background: url('path/to/your.svg') no-repeat; 
    background-size: 100% 100%; 
    flex: 1 1 auto; 
    margin: 0 -5px; 
} 

nav a { 
    display: block; 
    font: bold 1rem Sans-serif; 
    color: rgba(0, 0, 0, .25); 
    padding: 1em 2em; 
    text-align: center; 
    text-decoration: none; 
} 

nav li.completed a { 
    color: rgba(0, 0, 0, .5); 
} 

如果你喜歡，這是一個working sample。