Question

我试图将SVG用作列表中元素的背景图像，但它不起作用。我不确定它是不是我或者它是否是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的代码

nav > ul > li > a {
    display: inline;
    /*background-color: white;*/
    color: rgba(119, 119, 119, 0.59);
    background: url(../images/navPill.svg);
    background-size: cover;
}

这是SVG的链接

http://expirebox.com/download/13169ec086d8af7dd7ad4e5fe3f2d1ad.html [现在破了]

Answer 1

您可能希望使用background-size: contain代替cover来使箭头适合每个链接。但是，当您使用contain并且svg缩小时，细箭头线太微弱而无法看到。

这是一个工作示例。我只是将cover更改为contain并在箭头上添加了黑色填充，以便您可以看到它：

http://jsfiddle.net/68j04n3j/

Answer 2

这是针对这种情况的更好的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>

使用SVG作为<li>

2 个答案: