clip-path und mask

Author: bjelline

grafik/svg/index.html

@@ -452,7 +452,7 @@ <h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
 
 <p>SVG kann als <code>mask</code> oder <code>clip-path</code> verwendet werden.</p>
 
-<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier mann man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
+<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
 
 <p>Mask erwartet ein Bild als Wert. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask">MDN</a>.</p>
 
@@ -467,7 +467,7 @@ <h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
 <div style="box-sizing: border-box;mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M20%2C0H30A10%2C10%200%2C0%2C1%2040%2C10V20A10%2C10%200%2C0%2C0%2050%2C30H90A10%2C10%200%2C0%2C1%20100%2C40V90A10%2C10%200%2C0%2C1%2090%2C100H10A10%2C10%200%2C0%2C1%200%2C90V20A20%2C20%200%2C0%2C1%2020%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
 </div>
 
-<p>Dieses Beispiel wurde mit dem <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
+<p>Dieses Beispiel wurde mit <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
 
 
 <a class="slide_break do-not-print" id="slide-15" href="slide.html#slide-15"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 15">▻</a>

grafik/svg/slide.html

@@ -488,7 +488,7 @@ <h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
 
 <p>SVG kann als <code>mask</code> oder <code>clip-path</code> verwendet werden.</p>
 
-<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier mann man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
+<p>Clip-Path erwartet einen “Basic Shape” als Wert. Hier man einen SVG-Path angeben. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path">MDN</a>.</p>
 
 <p>Mask erwartet ein Bild als Wert. Mehr auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask">MDN</a>.</p>
 
@@ -503,7 +503,7 @@ <h2 id="svg-in-css-verwenden">SVG in CSS verwenden</h2>
 <div style="box-sizing: border-box;mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M20%2C0H30A10%2C10%200%2C0%2C1%2040%2C10V20A10%2C10%200%2C0%2C0%2050%2C30H90A10%2C10%200%2C0%2C1%20100%2C40V90A10%2C10%200%2C0%2C1%2090%2C100H10A10%2C10%200%2C0%2C1%200%2C90V20A20%2C20%200%2C0%2C1%2020%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;width: 100px;background-color:rgb(232, 124, 74);aspect-ratio: 1 / 1;margin: 4px;font-size:8px;">SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar. Nochmal: SVG als mask. Der Inhalt dieses Tags wird einfach verdeckt, der Text ist also nicht vollständig lesbar.</div>
 </div>
 
-<p>Dieses Beispiel wurde mit dem <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
+<p>Dieses Beispiel wurde mit <a href="https://corner-inverter.douiri.org/">Corner Inverter</a> gebaut.</p>
 
 </div>
 <div class="slide">