English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die SVG-Maskenfunktion ermöglicht es, Masken auf SVG-Formen anzuwenden. Masken bestimmen, welche Teile der SVG-Form sichtbar sind und welche Transparenz sie haben. Sie können SVG-Masken als fortgeschrittene Versionen von Schneidewegen betrachten.
Dies ist ein einfaches Maskenbeispiel:
<svg width="500" height="120"> <defs <mask id="mask1" x="0" y="0" width="100" height="100"> <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> </mask> </defs> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)"/> </svg>Testen Sie heraus‹/›
Dieses Beispiel verwendet ID=mask1Eine Maske definieren. Innerhalb des <mask>-Elements befindet sich ein <rect>-Element. Es ist genau dieses <rect>-Element, das die Form der Maske definiert.
Dieses Beispiel definiert auch einen <rect>-Element, der eine Maske verwendet. Der <rect>-Element verwendet den CSS-Style-Property mask intern und verweist auf das mask ID-Attribute.
Bildergebnis nach dem Ausführen:
Bitte beachten Sie, dass die Höhe des anzuzeigenden Rechtecks100 Pixel, aber der vertikale vordere50 Pixel sind sichtbar. Das liegt daran, dass das Maskenrechteck nur50 Pixel hoch. Das Rechteck ist nur im Bereich sichtbar, der vom Maskenrechteck abgedeckt wird.
Die Größe des schwarzen Umrisses des Rechtecks ist die Größe des Rechtecks ohne Maske.
Sie können jede SVG-Form als Maske verwenden. Dies ist ein Beispiel, bei dem ein Kreis als Maske verwendet wird:
<svg> <defs <mask id="mask2" x="0" y="0" width="100" height="100"> <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/> </mask> </defs> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask2)"/> </svg>Testen Sie heraus‹/›
Bildergebnis nach dem Ausführen:
Bitte beachten Sie noch einmal, dass nur der sichtbare Maskenkreis den zugehörigen Rechteck der Maske zeigt.
Bislang ist die Füllfarbe der Maskenform (Kreis oder Rechteck) auf #ffffff gesetzt. Die Farbe der Maskenform wird durch die Transparenz der Maskenform definiert. Je näher die Farbe der Maskenform an #ffffff (Weiß) ist, desto undurchsichtiger wird die Form, die mit der Maske verwendet wird. Je näher die Farbe der Maskenform an #000000 (Schwarz) ist, desto transparenter wird die Form, die mit der Maske verwendet wird.
Dies ist ein Beispiel, bei dem die Maske aus zwei verschiedenen Farben besteht (66666bestehend aus Rechtecken. Die Maske wird für ein einzelnes Rechteck verwendet, daher können Sie die beiden verschiedenen Formen innerhalb der Maske betrachten, wie sie denselben Formen beeinflussen.
<svg width="500" height="120"> <defs <mask id="mask3" x="0" y="0" width="100" height="100"> <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/> <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #666666"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> Dieser Text ist unter dem Rechteck positioned </text> <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask3)"/> </svg>Testen Sie heraus‹/›
Dieses Beispiel enthält auch einen Text unter dem Rechteck, der nur durch die halbtransparente Maskenteil des Rechtecks sichtbar ist.
Bildergebnis nach dem Ausführen:
Wenn eine Gradientenmaske auf das als Maske verwendete Shape angewendet wird, kann die Transparenz des Shapes, das die Maske anwendet, realisiert werden.
Dies ist ein Beispiel zur Definition einer Gradienten, bei dem eine Gradientenmaske, ein Rechteck mit der Maske und der Text unter dem Rechteck verwendet werden, sodass Sie sehen können, wie die Transparenz des Textes mit der Gradientenmaske variiert:
<svg width="500" height="120"> <defs <linearGradient id="gradient1" x="1="0%" y="1="0%" x="2="100%" y="2="0%" spreadMethod="pad" <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient> <mask id="mask4" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> Dieser Text ist unter dem Rechteck positioned </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask4)"/> </svg>Testen Sie heraus‹/›
Bildergebnis nach dem Ausführen:
Eine Gradientenmaske kann mit anderen Effekten (z.B. Füllmustern) kombiniert werden. Dies ist ein Beispiel, bei dem ein Rechteck ein Füllmuster als Füllung verwendet und in seiner Maske eine Gradientenmaske verwendet:
<svg width="500" height="120"> <defs <linearGradient id="gradient2" x="1="0%" y="1="0%" x="2="100%" y="2="0%" spreadMethod="pad" <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient> <pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff;" /> </pattern" <mask id="mask6" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient2)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> Dieser Text ist unter dem Rechteck positioned </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/> </svg>Testen Sie heraus‹/›
Beachten Sie, wie der Rechteck auf das Füllmuster im CSS-Fill-Attribut und wie die Maske im CSS-Attribut referenziert wird.
Bildergebnis nach dem Ausführen.
Sie können auch ein Füllmuster in der Maske verwenden, um die Maske in die Form des Füllmusters zu verwandeln. Dies ist ein Beispiel:
<svg width="500" height="120"> <defs <pattern id="pattern1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" /> </pattern" <mask id="mask5" x="0" y="0" width="200" height="100"> <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#pattern}1)"/> </mask> </defs> <text x="10" y="55" style="stroke: none; fill: #000000;"> Dieser Text ist unter dem Rechteck positioned </text> <rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask5)"/> </svg>Testen Sie heraus‹/›
Nach dem Ausführen der Bildwirkung. Bitte beachten Sie, dass das Rechteck jetzt durchsichtig ist, und das Füllmuster zeichnet Kreise, während an anderen Stellen vollständig transparent.