SVG选项卡（使用SVG形状作为模板）-CSDN博客

SVG的一项出色功能是，您可以一次定义一个形状（或一组形状），然后在整个页面中多次使用它。您甚至可以将不同的填充和滤镜应用到不同版本。 SVG模板，如果可以的话。

让我们看看是否可以通过创建一些选项卡来充分利用它。

我通过Oleg Solomka 在Codrops上的文章得知这是可能的。聪明的东西！

它是这样的：

定义形状（可以是圆形，矩形，多边形或任何形状，或用<g>包裹的一组形状）。
给该形状一个ID。
隐藏那个形状。
在需要的地方使用<use>使用形状。

在HTML中看起来像这样：

<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="visually-hidden">
  <circle id="template" cx="50" cy="50" r="50">
</svg>
  
<!-- USE TEMPLATE SEVERAL TIMES -->
<svg viewBox="0 0 100 100" class="circle circle-1">
  <use xlink:href="#template">
</svg>
  
<svg viewBox="0 0 100 100" class="circle circle-2">
  <use xlink:href="#template">
</svg>
  
<svg viewBox="0 0 100 100" class="circle circle-3">
  <use xlink:href="#template">
</svg>

然后，您可以分别引用模板的那些不同用途，并对它们做任何您喜欢的事情。例如，使用SVG渐变填充或SVG过滤器等。

您可以通过将该模板放在页面之外或`display: none;`来隐藏该模板`display: none;` ing。我可能会避免尝试直接使用它，以保持良好的关注点分离。

演示：

在CodePen上查看 Chris Coyier （ @chriscoyier ）的Pen Basic SVG模板

创建标签

我刚刚从律师那里得到了一些书面文件，当然，所有这些文件都经过了经典的文件夹设计。

CSS之前曾尝试过这种形状。圆角选项卡处理形状逐渐变细到文件夹的其余部分。倾斜的接片处理倾斜的侧面。但是它们都不是完美的，很难或不可能将它们组合在一起，并且尽管很聪明，但是它们对生成的内容等的使用还是有点“ hacky”。

仅将dang形状绘制为矢量并使用它会更容易吗？绝对是完美的SVG领域。更好的是，我们可以只使用模板定义一次，然后重复使用它。这样一来，无论我们最终使用多大的尺寸，都无需更改新资产即可更改颜色等。

您可以在任何矢量绘图工具中轻松绘制该形状并为其捕获SVG代码。如果您需要帮助，这篇文章应该是有用的。

我去找股票摄影网站去找东西，只是为了好玩，然后我在Shutterstock上找到了一些我想要去的东西。我下载了它们，然后从那里抓取了形状。

水煮基本上是这样的：

<svg>
  <path id="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
			z">
</svg>

HTML

由于我们可能将标签称为“导航”和“ 导航是列表” ，因此最终得到的是：

<nav role="navigation" class="main-navigation">
  <ul>
    <li class="tab-1 active">
      <a href="#home">
        <span>Home</span>
        <svg viewBox="0 0 122 40">
           <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-2">
      <a href="#about">
        <span>About</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>

    <!-- etc. as many tabs as you'd like -->

  </ul>
</nav>

我们需要在其中的标记中使用<svg> ，因为这是这样工作的。我们将其包装在<a>因为我们希望这些标签为可点击/可点击的链接。我们需要<span>因为我们打算将<svg>和文本放在彼此的顶部，而文本在顶部。

CSS

我们可以使用包装元素之一作为定位上下文。我们将绝对定位<span>和<svg>并赋予<span>更高的z-index 。

在这里以SCSS呈现，因为嵌套使阅读更容易：

.main-navigation {
  overflow: hidden;
  position: relative;
  padding: 0 0 0 1rem; /* push tabs back to right */
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    float: left;
    width: 12rem;
    height: 5rem;
    margin: 0 0 0 -1rem; /* pull to left to overlap tabs */
    position: relative;
    &.active {
      z-index: 6; /* active one on top */
    }
  }
  a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  svg {
    width: 120%; /* tab shape should stick out past clickable box */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none; /* SVG eats clicks weird */
  }
  span {
    position: relative;
    padding: 1rem 0 0 3.3rem; /* position the text */
    z-index: 2;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}

现在，要更改每个选项卡的外观，可以按类名称引用它们并更改fill 。我们还需要按相反的z-index顺序排列它们，因此第一个位于顶部，而不是最后一个，通过显式声明它们很容易做到。

.tab-1 {
    z-index: 4;
    svg {
      fill: red; 
    }
  }
.tab-2 {
    z-index: 3;
    svg {
      fill: orange; 
    }
  }

演示

在CodePen上查看 Chris Coyier （ @chriscoyier ）的Pen SVG标签

那里有一些JavaScript可以激活不同的选项卡，本质上就是在更改类名。

您可能会注意到选项卡也有一些渐变。这里有趣的联系是，您可以在与原始模板形状相同的<svg>声明SVG渐变，然后仅通过按ID引用过滤器来填充模板化形状。

<linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
  <stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
  <stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
</linearGradient>

.tab-1 {
  svg {
    fill: url(#tab-1-bg); 
  }
}

因此，基本上，您也可以将过滤器也视为模板，可以随意重复使用它们。试玩一下演示。您可能会喜欢其中一些注释掉的部分，主要处理阴影。真正很酷的是，使它们灵活一些，因为有可用空间（文本也是如此），选项卡的大小会越来越小，然后在其很小的时候完全放弃它们，并换成移动导航解决方案。

翻译自: https://css-tricks.com/svg-tabs-using-svg-shape-template/