diff options
Diffstat (limited to 'files/de/web/css/clip-path/index.html')
| -rw-r--r-- | files/de/web/css/clip-path/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/de/web/css/clip-path/index.html b/files/de/web/css/clip-path/index.html new file mode 100644 index 0000000000..63df0e6248 --- /dev/null +++ b/files/de/web/css/clip-path/index.html @@ -0,0 +1,128 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - Experimentell + - Layout + - NeedsBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/clip-path +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong>clip-path</strong> CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.</p> + +<p>Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie <a href="/de/docs/Web/SVG/Element/circle">circle()</a> definiert wird. Die <code>clip-path</code> Eigenschaft ersetzt die nun als veraltet geltende <a href="/de/docs/Web/CSS/clip">clip</a> Eigenschaft.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css">/* Schlüsselwortwerte */ +clip-path: none; +clip-path: fill-box; +clip-path: stroke-box; +clip-path: view-box; + +/* Bildwerte */ +clip-path: url(resources.svg#c1); +clip-path: linear-gradient(blue, transparent); + +/* Geometriewerte */ +clip-path: inset(100px 50px); +clip-path: circle(50px at 0 100px); +clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + +/* Globale Werte */ +clip-path: inherit; +clip-path: initial; +clip-path: unset; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><clip-source></code></dt> + <dd>Repräsentiert eine URL, die ein Schnittpfad Element referenziert.</dd> + <dt><code><basic-shape></code></dt> + <dd>Eine Grundform Funktion, wie sie in der <a href="/en-US/docs/Web/CSS/basic-shape">CSS Shapes Specifikation</a> definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird <code>border-box</code> als Referenzbox verwendet.</dd> + <dt><code><geometry-box></code></dt> + <dd> + <p>Falls in Kombination mit <code><basic-shape></code> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch {{cssxref("border-radius")}}) als Schnittpfad verwendet.</p> + </dd> + <dt><code>fill-box</code></dt> + <dd> + <p>Verwendet den Objektrahmen als Referenzbox.</p> + </dd> + <dt><code>stroke-box</code></dt> + <dd> + <p>Verwendet die Strichrahmenbox als Referenzbox.</p> + </dd> + <dt><code>view-box</code></dt> + <dd> + <p>Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein {{SVGAttr("viewBox")}} Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das <code>viewBox</code> Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des <code>viewBox</code> Attributs gesetzt.</p> + </dd> + <dt><code>none</code></dt> + <dd>Es wird kein Schnittpfad erzeugt.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css">/* Inline-SVG */ +.target { + clip-path: url(#c1); +} + +/* externes SVG */ +.anothertarget { + clip-path: url(resources.svg#c1); +} + +/* Kreis */ +.circleClass { + clip-path: circle(15px at 20px 20px); +}</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Erweitert die Anwendung auf HTML Elemente</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Ursprüngliche Definition (gilt nur für SVG Elemente)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +{{Compat("css.properties.clip-path")}} + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("clip-rule")}}, {{cssxref("mask")}}, {{cssxref("filter")}}</li> + <li><a href="/de/docs/SVG_Elemente_auf_HTML_Inhalt_anwenden">SVG Elemente auf HTML Inhalt anwenden</a></li> + <li>{{SVGAttr("clip-path")}} SVG Attribut</li> +</ul> |