SVG-Tutorial

SVG-Element

SVG <mask> Element svg <pattern> Element

SVG <clipPath> Element

Das SVG <clipPath>-Element wird verwendet, um SVG-Formen basierend auf einer bestimmten Methode zu schneiden. Es wird auch als SVG-Schneidemethode bezeichnet. Der sichtbare Teil der Form im Innern der Methode ist sichtbar, während der äußere Teil unsichtbar ist.

Online-Beispiel

Nachfolgendes Beispiel zeigt, wie ein blauer Sektor mit clipPath gezeichnet wird.

Beispiel

<svg height="450" width="450">
　　<defs>
　　　　　　<clipPath id="clip">
　　　　　　　　　　<rect x="15" y="15" width="40" height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25" cy="25"　r="30"
　　　　　　　　　　style="fill: #0000ff; clip-path: url(#clip); "　/>
</svg>

Testen Sie heraus‹/›

Das Ergebnis des Laufens ist wie folgt:

Verwendungserklärung

Jetzt können Sie sehen, dass der sichtbare Teil des Kreises innerhalb der Schneidemethode beschnitten wurde.
<clipPath>Elements id-Attribut definiert den eindeutigen Namen der Schneidemethode.

Mehr Online-Beispiele

Nachfolgendes Beispiel zeigt, wie ein Herzshape mit clipPath gezeichnet wird:

Beispiel

<style>
svg{width:40%; Height:30%}
@keyframes openYourHeart {from {r: 0} to {r:　60px}}
#myClip circle {
　　animation: openYourHeart　15s infinite;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　Alle Dinge außerhalb des Kreises werden beschnitten und daher unsichtbar.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　Als Referenzsymbol (Originaltext: for reference) das schwarze Herz　-->
　　<path　id="heart"　d="M10,30　A20,20,0,0,1,50,30　A20,20,0,0,1,90,30　Q90,60,50,90　Q10,60,10,30　Z"></path>
　
　　<!--
　　　　Nur der rote Kreis, der innerhalb des schwarzen Herzens liegt, ist sichtbar;
　　　　Mit zunehmendem Wachstum des Kreises wird er allmählich zu einem roten Herzform.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

SVG <mask> Element svg <pattern> Element