Austauschen von SVG Icons

Nehmen wir an, Sie verwenden Inline-SVG und möchten das SVG-Icon, das in einem Element bei Zustandsänderungen angezeigt wird, wie z. B. beim Ändern einer Klasse oder bei :hover/:focus, ändern. Es gibt verschiedene Möglichkeiten, dies anzugehen.

Technik #1: SVG-Element ein-/ausblenden

Beide Icons einfügen

<a href="#0" class="expand-link">
  <svg class="icon icon-expand" viewBox="0 0 32 32"><use xlink:href="#icon-expand"></use></svg>
  <svg class="icon icon-contract" viewBox="0 0 32 32"><use xlink:href="#icon-contract"></use></svg>
</a>

Eines standardmäßig ausblenden

.expand-link .icon-contract {
  display: none;
}

Beim Zustandswechsel die display-Eigenschaft austauschen

.expand-link:hover .icon-expand,
.expand-link:active .icon-expand{
  display: none;
}
.expand-link:hover .icon-contract,
.expand-link:active .icon-contract{
  display: block;
}

Siehe den Pen praEH von Chris Coyier (@chriscoyier) auf CodePen.

Technik #2: Pfade ein-/ausblenden

Sie können die <use>-Technik hierfür nicht verwenden (da eine Zustandsänderung an einem HTML-Element auf einer Ebene über dem von <use> erzeugten Shadow Root stattfindet und CSS daher nicht durchdringen kann), aber Sie können Formelemente direkt ausblenden/anzeigen, wenn das Inline-SVG direkt und unverfälscht vorhanden ist.

<a href="#0"class="icon-expand-link">
  <svg ... >
    <path class="expand" d="M32 0v12l-etc"></path>
    <path class="contract" d="M2 18h12v12l-etc"></path>
  </svg>
</a>

.icon-expand-link .contract {
  display: none;
}
.icon-expand-link:hover .expand {
  display: none;
}
.icon-expand-link:hover .contract {
  display: block;
}

Siehe den Pen cCiBn von Chris Coyier (@chriscoyier) auf CodePen.

Technik #3: xlink:href ändern

Mithilfe von JavaScript könnten Sie den Teil des SVG ändern, auf den in <use> verwiesen wird. Es erscheint seltsam, Styling-Dinge mit JavaScript zu tun, aber keine duplizierte Markup zu haben, ist schön, und wenn Sie auf ein <symbol> verweisen, würden sich auch <title> und <desc> ändern, was schön ist.

<a href="#0" class="expand-link">
  <svg class="icon icon-expand" viewBox="0 0 32 32"><use id="target" xlink:href="#icon-expand"></use></svg>
</a>

$(".expand-link")
  .on("mouseenter", function() {
    $(this).find("use").attr("xlink:href", "#icon-contract");
  })
  .on("mouseleave", function() {
    $(this).find("use").attr("xlink:href", "#icon-expand");
  });

Siehe den Pen Dqpib von Chris Coyier (@chriscoyier) auf CodePen.

Technik #4: Mit CSS neu gestalten

Denken Sie daran, dass Sie auch mit CSS viel erreichen können. Vielleicht benötigen Sie keine komplett andere Formensammlung, sondern können Dinge einfach mit CSS ändern, um im Wesentlichen ein neues Icon zu erstellen.

Wenn Sie keine Stile auf Elemente innerhalb des SVG setzen, können Sie diese direkt auf das SVG anwenden (was effektiv die Shadow-DOM-Grenze überschreitet). Außerdem können Sie CSS-Transformationen und ähnliches verwenden, um zu drehen/skalieren/verschieben.

Siehe den Pen JFjdl von Chris Coyier (@chriscoyier) auf CodePen.

Verwenden Sie kein Inline-SVG?

Wenn Sie kein Inline-SVG verwenden, sondern stattdessen SVG als <img>, sollten diese Hide-Show-Sachen oder das Ändern der Quelle gut funktionieren.

Wenn Sie SVG als background-image verwenden, ist das Ändern der Quelle ebenfalls eine Option. Beachten Sie auch, dass selbst wenn Sie Data-URIs in Ihrem CSS für mehrere Icon-Versionen verwenden, dies aufgebläht wirken kann, aber wenn sie sich ziemlich ähnlich sind, kann GZIP hier gute Arbeit leisten.