Question

我正在尝试使用SVG创建this导航。我得到了一个SVG，但它没有成功，所以有人在SO帮助我做另一个。但是现在我不确定如何使用

创建导航

<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。

使用svg创建全宽导航

1 个答案: