SVG教程

SVG-Elemente

SVG <filter> Filter SVG Referenzhandbuch

SVG <clippath> Schnittpfad

SVG Schneidepfade (auch als SVG Schneiden bezeichnet) werden verwendet, um SVG-Formen basierend auf einer bestimmten Pfade zu schneiden. Der innere Teil der Form ist sichtbar, der äußere Teil nicht.

Schneidemaske-Beispiel

Dies ist ein einfaches Beispiel für eine Schneidemaske:

Beispiel

<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path:　url(#clipPath);　"></circle>
</svg>
<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath2">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path:　url(#clipPath2);　"></circle>
　　　　<rect　x="15"　y="15"　width="40"　height="40"　style="stroke:　#000000;　fill:none;"></rect>
</svg>

Testen Sie heraus‹/›

Dieser Beispiel definiert eine Form, die ähnlich wie ein Rechteck (<clipPath>-Element) ist, als Schneidemaske. Der im Beispielende definierte Kreis wird durch die CSS-Eigenschaft clip-path verweist auf das <clipPath>-id-Attribut.

Links unten ist das generierte Bild. Rechts ist dasselbe Bild, aber auch die Schneidemaske wurde gezeichnet.

Bitte beachten Sie, dass nur der runde Teil im Schneidmaske-Bereich sichtbar ist. Der Rest wird beschnitten.

Hochwertige Schneidemaske

Sie können auch andere Formen als Rechteck als Schneidemaske verwenden. Sie können einen Kreis, einen Ellipsen, ein Polygon oder ein benutzerdefiniertes Pfad verwenden. Jede SVG-Form kann als Schneidemaske verwendet werden.

Dies ist ein Beispiel, wie das <path>-Element als Schneidemaske verwendet wird, da dies die höchsten Ebenen der Schneidemaske sind, die Sie verwenden können. Die Schneidemaske wird auf das <rect>-Element angewendet.

Beispiel

<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
</svg>
<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath3">
　　　　　　　　　　　　<path　d="M10,10　q60,60　100,0　q50,50　50,50　l40,0　l-40,40　l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　clip-path:　url(#clipPath3);"></rect>
</svg>

Testen Sie heraus‹/›

Dies ist das generierte Bild-rechts. Links wird das Bild ohne Schneidemaske angezeigt.

Schneidemaske auf Gruppe

Eine Schneidemaske kann auf eine Gruppe von SVG-Formen angewendet werden, anstatt auf jede Form einzeln. Es reicht aus, die Formen in ein <g>-Element zu setzen, und dann die CSS-Eigenschaft clip-Pfad. Dies ist ein Beispiel:

Beispiel

<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath4">
　　　　　　　　　　　　<rect　x="10"　y="20"　breite="100"　height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath4);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

Testen Sie heraus‹/›

Unten ist das Bild ohne Schneidemaske gezeigt, dann das Bild mit angewendeter Schneidemaske:

Text als Schneidemaske

Text kann auch als Schneidemaske verwendet werden. Dies ist ein Beispiel:

Beispiel

<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　width="200"　Höhe="100"　style="border:　1px　scharf　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath5">
　　　　　　　　　　　　<text　x="10"　y="20"　style="font-Größe:　20px;　">
　　　　　　　　　　　　　　　　Dies ist ein Text
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-path:　url(#clipPath5);">
　　　　　　　　<rect　x="5"　y="5"　width="190"　height="90"　style="stroke:　none;　fill:#00ff00;"></rect>
　　　　　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
　　　　</g>
</svg>

Testen Sie heraus‹/›

Dies ist das Ergebnis mit und ohne Schnittpfad:

Wie Sie sehen können, wird derzeit nur ein Teil der internen Form des Textes angezeigt.

SVG <filter> Filter SVG Referenzhandbuch