Masken und Beschneidungen

[Matthias Scharwies]

Guten Morgen!

4. Ich habe zwar noch nicht wirklich Ahnung vom Thema, aber das Performationsbeispiel war noch müllig. Teils hast Du Dich bei Eigenschaftsnamen vertippt, hinzu kommt, dass die MDN Doku falsch ist und es im Netz scheinbar auch nirgends was besseres gibt. Aber mit Try und Error hab ich rausgefunden, dass die Parameter für -webkit-mask-box-image denen für mask-border entsprechen (bis auf die mode-Angabe), und dass repeat nicht die beste Idee ist. space ist besser. Und eine width-Angabe von 5% macht es gefälliger. Die slice-Angabe muss 25% sein, nicht 30. Wenn überhaupt, dann 35.5, weil das SVG 142x142 ist. Die 30 hast Du aus MDN übernommen, wo das Maskenbild aber gedrittelt werden konnte und 90x90 groß war.

Ich habe das mal gründlich überarbeitet. Das Bild sollten wir – wenn das Copyright das zulässt – noch ins Wiki hochladen oder als data-URL codieren. Ein Bild aus dem US-Teil von AWS zu laden enthält – scheint mir – eine DSGVO-Tretmine.

Das Bild ist als SVG hochgeladen - Sollte man die Größe von 142x142 auf einen „runden“ Wert anpassen?

Beispiel:CSS3_mask-border.html#view_result

@JürgenB @all Wie sieht das im Safari aus?

---

Sollte man diese Vorlage für border-image auch als SVG hochladen?

Herzliche Grüße

Matthias Scharwies