Anwenden von SVG-Effekten auf HTML-Inhalte

Sie können SVG innerhalb von CSS-Stilen verwenden, um grafische Effekte auf HTML-Inhalte anzuwenden.

Sie können SVG in Stilen entweder innerhalb desselben Dokuments oder in einem externen Stylesheet angeben. Es gibt 3 Eigenschaften, die Sie verwenden können: mask, clip-path und filter.

Hinweis: Verweise auf SVG in externen Dateien müssen auf dasselbe Ursprung wie das referenzierende Dokument verweisen.

Eingebettetes SVG verwenden

Um einen SVG-Effekt mit CSS-Stilen anzuwenden, müssen Sie zuerst den CSS-Stil erstellen, der auf das anzuwendende SVG verweist.

css

p {
  mask: url("#my-mask");
}

Im obigen Beispiel sind alle Absätze mit einem SVG <mask> mit der ID my-mask maskiert.

Beispiel: Maskierung

Zum Beispiel können Sie einen Farbverlaufsmaske für HTML-Inhalte erstellen, indem Sie SVG- und CSS-Code wie den folgenden innerhalb Ihres HTML-Dokuments verwenden:

html

<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>

css

.target {
  mask: url("#mask-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

Beachten Sie, dass in dem CSS die Maske unter Verwendung einer URL zur ID #mask-1 angegeben wird, was die ID der darunter spezifizierten SVG-Maske ist. Alles andere gibt Details über die Gradientenmaske selbst an.

Das Anwenden des SVG-Effekts auf HTML wird erreicht, indem die oben definierte target-Klasse einem Element zugewiesen wird, wie folgt:

html

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

Das obige Beispiel würde mit der darauf angewendeten Maske gerendert werden.

Beispiel: Clipping

Dieses Beispiel demonstriert die Verwendung von SVG zum Clippen von HTML-Inhalten. Beachten Sie, dass selbst die anklickbaren Bereiche für Links geschnitten werden.

html

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

<button>Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>

css

.target {
  clip-path: url("#clipping-path-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

Dies stellt einen Clip-Bereich aus einem Kreis und einem Rechteck her, weist ihm die ID #clipping-path-1 zu und referenziert ihn dann im CSS. Der Clip-Pfad kann jedem Element mit der target-Klasse zugewiesen werden.

Sie können Änderungen am SVG in Echtzeit vornehmen und sehen, wie sie sich sofort auf das Rendering des HTML auswirken. Zum Beispiel können Sie den Kreis im oben eingerichteten Clip-Pfad in der Größe ändern:

const circle = document.getElementById("circle");

function toggleRadius() {
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}

document.querySelector("button").addEventListener("click", toggleRadius);

Beispiel: Filterung

Dies zeigt die Anwendung eines Filters auf HTML-Inhalte unter Verwendung von SVG. Es werden mehrere Filter festgelegt, die mit CSS auf drei Elemente in sowohl den normalen als auch den Mouse-Hover-Zuständen angewendet werden.

html

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

p.target {
  background: lime;
}

Jeder SVG-Filter kann auf diese Weise angewendet werden. Zum Beispiel könnten Sie einen Unschärfe-Effekt anwenden:

html

<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>

Sie könnten auch eine Farbmatrix anwenden:

html

<svg height="0">
  <filter id="f2">
    <feColorMatrix
      values="0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0      0      0      1 0" />
  </filter>
</svg>

Und noch einige weitere Filter:

html

<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
      color-interpolation-filters="sRGB"
      order="3"
      kernelMatrix="0 -1 0
                   -1 4 -1
                    0 -1 0"
      preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
      surfaceScale="5"
      specularConstant="1"
      specularExponent="10"
      lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 1 0 0 0"
      color-interpolation-filters="sRGB" />
  </filter>
</svg>

Die fünf Filter werden mit folgendem CSS angewendet:

css

p.target {
  filter: url("#f3");
}
p.target:hover {
  filter: url("#f5");
}
em.target {
  filter: url("#f1");
}
em.target:hover {
  filter: url("#f4");
}
pre.target {
  filter: url("#f2");
}
pre.target:hover {
  filter: url("#f3");
}

Beispiel: Verwischter Text

Um Text zu verwischen, gibt es eine CSS-Filterfunktion namens blur(). Sie können denselben Effekt mit SVG-Filtern erzielen.

html

<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>

Sie können den SVG- und den CSS-Filter in derselben Klasse anwenden:

css

.blur {
  filter: url("#wherearemyglasses");
}

Verwischen erfordert viel Rechenleistung, verwenden Sie es daher sparsam, insbesondere in Elementen, die gescrollt oder animiert werden.

Beispiel: Texteffekte

SVG-Effekte können auch verwendet werden, um einen dynamischeren und flexibleren Ansatz zum Hinzufügen von Text im Vergleich zu einfachem HTML-Text zu bieten.

Durch die Erstellung des Textes mit SVG-Elementen in Kombination mit HTML können Sie eine Vielzahl unterschiedlicher Texteffekte erzeugen. Sie können den Text rotieren:

html

<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Example text
  </text>
</svg>

Verwendung externer Referenzen

SVG, das zum Clippen, Maskieren und Filtern verwendet wird, kann aus einer externen Quelle geladen werden, solange diese Quelle aus demselben Ursprung wie das HTML-Dokument stammt, auf das es angewendet wird.

Zum Beispiel, wenn Ihr CSS in einer Datei namens default.css ist, kann es so aussehen:

css

.target {
  clip-path: url("resources.svg#c1");
}

Das SVG wird dann aus einer Datei namens resources.svg importiert, wobei der Clip-Pfad mit der ID c1 verwendet wird.

Siehe auch

SVG
clip-path-Eigenschaft
mask-Eigenschaft
Formen beim Clippen und Maskieren – und wie man sie verwendet

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden