缩放 SVG 作为前后元素应用

Question

我有两张SVG图片分别应用在一个'a'标签前后，如下所示：

      <li>         
       <a href="#">
        plan
       </a>
      </li>

CSS：

.navigation ul li::before {content:url('left.svg'); position: relative; top: 6px;}
.navigation ul li::after {content:url('right.svg'); position: relative; top: 6px;}

图片已经出现，但它们太大了，所以我试着通过以下方式调整它们的大小：

      <svg width="10" height="23" viewbox="0 0 102 102">
      <li>
        <a href="#">
          explore
        </a>
      </li>
      </svg>

但是SVG标记并未应用于SVG图像，它只将'a'标记视为子级。我对如何有效/简单地完成此操作感到非常困惑 - 我只想确保出现在'a'标记之前和之后的SVG图像被缩小。

- user1658296

---

.navigation ul li::before {content:url('left.svg'); width:10px; height:23px; ... }?.navigation ul li::before {content:url('left.svg'); width:10px; height:23px; ... }? - pawel

@pawel 这个不起作用 - 我相信这里必须使用viewbox。 - user1658296

Answer 1

你可以将SVG图片作为background-image，并在伪元素中添加高度/宽度，而不是在content中使用它：

.navigation ul li:before,
.navigation ul li:after {
  content: " ";
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg');
  background-size: cover;
  position: relative;
  display: inline-block;
  top: 6px;
  width: 20px;
  height: 20px;
}

<nav class="navigation">
  <ul>
    <li>         
      <a href="#">plan</a>
    </li>
  </ul>
</nav>

- zessx

---

谢谢，这太棒了！使用这种方法，有没有办法修剪SVG上多余的空格？ - user1658296

不行。如果你的SVG文件内部有多余的空白，那么很难轻易地将其修剪掉。你可以使用负边距，但这需要根据原始SVG大小、当前比例和像素中的空白原始大小进行近似计算。与其使用糟糕的代码，使用正确的SVG会更好、更容易。 - zessx