SVG Tabs (Verwendung einer SVG-Form als Vorlage)

Eine hervorragende Funktion von SVG ist, dass Sie eine Form (oder eine Gruppe von Formen) einmal definieren und sie dann mehrmals auf einer Seite verwenden können. Sie können sogar unterschiedliche Füllungen und Filter usw. auf die verschiedenen Versionen anwenden. SVG-Templating, wenn Sie so wollen.

Mal sehen, ob wir das gut nutzen können, indem wir einige Tabs erstellen.

Ich habe erfahren, dass dies durch Oleg Solomkas Artikel auf Codrops möglich ist. Clever!

Es funktioniert so

1. Definieren Sie die Form (es kann ein Kreis, ein Rechteck, ein Polygon oder eine beliebige Form oder eine Gruppe davon, die in ein <g> eingepackt ist).
2. Geben Sie dieser Form eine ID.
3. Verstecken Sie diese Form.
4. Verwenden Sie die Form dort, wo sie benötigt wird, mit <use>.

Das sieht in HTML so aus

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

Sie können dann diese verschiedenen Verwendungen der Vorlage einzeln referenzieren und damit tun, was Sie möchten. Zum Beispiel SVG-Gradientfüllungen oder SVG-Filter oder was auch immer.

Demo

Sehen Sie den Pen Basic SVG Templating von Chris Coyier (@chriscoyier) auf CodePen

Tabs erstellen

Ich habe gerade einige Papiere von einem Anwalt zurückbekommen und natürlich sind sie alle mit diesem klassischen Aktenordner-Design getabbt.

Diese Art von Form wurde schon einmal mit CSS versucht. Abgerundete Tabs befasst sich mit der Verjüngung der Form nach unten in den Rest des Ordners. Schräge Tabs befasst sich mit den abgewinkelten Seiten. Aber keiner von beiden ist perfekt, es wäre schwierig oder unmöglich, sie zu kombinieren, und sie sind, obwohl clever, ein wenig "hackig" mit der Verwendung von generiertem Inhalt und Ähnlichem.

Wäre es nicht einfacher, die verdammte Form einfach als Vektor zu zeichnen und zu verwenden? Absolut, das ist perfektes SVG-Terrain. Und besser noch, wir können einfach eine Vorlage verwenden, um sie einmal zu definieren und immer wieder zu verwenden. Das ermöglicht es uns, die Farbe usw. zu ändern, ohne ein neues Asset anfordern zu müssen, und sieht scharf aus, egal in welcher Größe wir sie verwenden.

Sie könnten diese Form leicht in jedem Vektorgrafikprogramm zeichnen und den SVG-Code dafür extrahieren. Wenn Sie dabei Hilfe benötigen, sollte dieser Artikel nützlich sein.

Ich habe mich auf Stockfoto-Websites umgesehen, um einige zu finden, nur zum Spaß, und ich habe einige bei Shutterstock gefunden, die ungefähr dem entsprachen, was ich vorhatte. Ich habe sie heruntergeladen und die Form daraus extrahiert.

Zurückgeführt ist im Grunde dies

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

Das HTML

Da wir Tabs wahrscheinlich Navigation nennen würden und Navigation Listen sind, hier ist, was wir am Ende hätten

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

Wir müssen <svg> im Markup verwenden, da dies die Funktionsweise ist. Wir verpacken es in ein <a>, da wir beabsichtigen, die Tabs als klickbare/tippbare Links zu gestalten. Wir brauchen das <span>, da wir beabsichtigen, das <svg> und den Text direkt übereinander zu positionieren, mit dem Text darüber.

Das CSS

Wir können eines der umgebenden Elemente als Positionierungskontext verwenden. Wir werden sowohl den <span> als auch das <svg> absolut positionieren und dem <span> einen höheren z-index geben.

Präsentiert in SCSS, da die Verschachtelung es angenehmer zu lesen macht

.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%;
  }
}

Um das Aussehen jedes Tabs zu ändern, können Sie sie anhand des Klassennamens referenzieren und die fill ändern. Wir brauchen sie auch in umgekehrter z-index-Reihenfolge, damit der erste oben liegt und nicht der letzte, was durch explizites Deklarieren einfach genug ist.

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

Die Demo

Sehen Sie den Pen SVG Tabs von Chris Coyier (@chriscoyier) auf CodePen

Es gibt etwas JavaScript im Inneren, um die verschiedenen Tabs zu aktivieren, was im Grunde nur das Ändern eines Klassennamens ist.

Sie werden vielleicht bemerken, dass die Tabs auch leichte Verläufe haben. Die interessante Verbindung hier ist, dass Sie diesen SVG-Verlauf in demselben <svg> wie die ursprüngliche Vorlage definieren können und dann eine Vorlageform füllen, indem Sie einfach den Filter anhand der ID referenzieren.

<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); 
  }
}

Im Grunde können Sie Ihre Filter also auch als Vorlagen betrachten und sie nach Belieben wiederverwenden. Spielen Sie auch ein wenig mit der Demo herum. Dort gibt es einige auskommentierte Teile, die sich hauptsächlich mit Schatten befassen, die Ihnen gefallen könnten. Richtig cool wäre es, sie flexibel zu machen, wo die Tabgröße je nach verfügbarem Platz größer und kleiner wird (auch der Text) und sie dann bei geringer Größe vollständig auszublenden und durch eine mobile Navigationslösung zu ersetzen.