Guten Morgen! Ich habe [**SVG/Farben**](https://wiki.selfhtml.org/wiki/SVG/Farben) neu sortiert: # 1. [Painting - wie wird in SVG „gemalt“?](https://wiki.selfhtml.org/wiki/SVG/Farben#Painting_-_wie_wird_in_SVG_.E2.80.9Egemalt.E2.80.9C.3F) * sehr kurze Einführung * nur 3 Bsp. zu fill, fill-rule und fill-opacity # 2. [SVG/Farben/Kontur](https://wiki.selfhtml.org/wiki/SVG/Farben/Kontur) * gleich geblieben * unten 2 Bsp zu paint-order und vector-effect (neu) # 3. [**SVG/Farben/Markierungen**](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen) * völlig neu aufgebaut - das hatte ich 2015 auf die Schnelle gemacht, da gab es einiges zu tun * [1. Bsp ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-marker-1.html)erklärt markerUnits * Interessant wird's bei [context-fill_und_context-stroke](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen#context-fill_und_context-stroke). Werft mal euren Firefox an, wenn ihr den noch auf der Platte habt und schaut euch das an. (*BTW: Ohne schließenden body-Tag stürzt Frickl ab! Hatte 10min gesucht, warum - immerhin hatte der W3C- Validator nicht gemeckert.*) Fazit: Markierungen sind wie Verläufe mächtige Werkzeuge, jeodch eben deshalb im Alltag nicht zu gebrauchen Das galt für SVG-filter genauso, die Umsetzung der Algorithmen in CSS finde ich genial, wenn man das bei marker doch auch so machen könnte: ~~~ CSS polyline { marker-knockout-left: 10px circle; marker-knockout-right: 10px circle; } ~~~ [](/images/9481e8bc-1fa8-11ee-bdce-b42e9947ef30.svg) Es lag wohl an Rendering-Problemen bei gekrümmten Pfaden, dass das nicht implementiert wurde. *(Oder jemand hat sch an den 10px für dimensionsloe Einheiten gestoßen)* [](/images/d7aa8ca6-1fa9-11ee-80a6-b42e9947ef30.svg) Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet: [](/images/6faa9c36-1fa9-11ee-81aa-b42e9947ef30.png) Was haltet ihr davon? So können wir Icons und mehr Links oder einen längeren Linktext kombinieren. > Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch! > > > > > Herzliche Grüße > > Matthias Scharwies > Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

Guten Morgen! Ich habe [**SVG/Farben**](https://wiki.selfhtml.org/wiki/SVG/Farben) neu sortiert: # 1. [Painting - wie wird in SVG „gemalt“?](https://wiki.selfhtml.org/wiki/SVG/Farben#Painting_-_wie_wird_in_SVG_.E2.80.9Egemalt.E2.80.9C.3F) * sehr kurze Einführung * nur 3 Bsp. zu fill, fill-rule und fill-opacity # 2. [SVG/Farben/Kontur](https://wiki.selfhtml.org/wiki/SVG/Farben/Kontur) * weitgehend gleich geblieben * unten 2 Bsp zu paint-order und vector-effect (kommt noch) # 3. [**SVG/Farben/Markierungen**](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen) * völlig neu aufgebaut - das hatte ich 2015 auf die Schnelle gemacht * [1. Bsp ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-marker-1.html)erklärt markerUnits * Interessant wird's bei [context-fill_und_context-stroke](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen#context-fill_und_context-stroke). Werft mal euren Firefox an, wenn ihr den noch auf der Platte habt und schaut euch das an. (*BTW: Ohne schließenden body-Tag stürzt Frickl ab! Hatte 10min gesucht, warum - immerhin hatte der W3C- Validator nicht gemeckert.*) Fazit: Markierungen sind wie Verläufe mächtige Werkzeuge, jeodch eben deshalb im Alltag nicht zu gebrauchen Das galt für SVG-filter genauso, die Umsetzung der Algorithmen in CSS finde ich genial, wenn man das bei marker doch auch so machen könnte: ~~~ CSS polyline { marker-knockout-left: 10px circle; marker-knockout-right: 10px circle; } ~~~ [](/images/9481e8bc-1fa8-11ee-bdce-b42e9947ef30.svg) Es lag wohl an Rendering-Problemen bei gekrümmten Pfaden, dass das nicht implementiert wurde. *(Oder jemand hat sch an den 10px für dimensionsloe Einheiten gestoßen)* [](/images/d7aa8ca6-1fa9-11ee-80a6-b42e9947ef30.svg) Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet: [](/images/6faa9c36-1fa9-11ee-81aa-b42e9947ef30.png) Was haltet ihr davon? So können wir Icons und mehr Links oder einen längeren Linktext kombinieren. > Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch! > > > > > Herzliche Grüße > > Matthias Scharwies > Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

Guten Morgen! Ich habe [**SVG/Farben**](https://wiki.selfhtml.org/wiki/SVG/Farben) neu sortiert: # 1. [Painting - wie wird in SVG „gemalt“?](https://wiki.selfhtml.org/wiki/SVG/Farben#Painting_-_wie_wird_in_SVG_.E2.80.9Egemalt.E2.80.9C.3F) * sehr kurze Einführung * nur 3 Bsp. zu fill, fill-rule und fill-opacity # 2. [SVG/Farben/Kontur](https://wiki.selfhtml.org/wiki/SVG/Farben/Kontur) * weitgehend gleich geblieben * unten 2 Bsp zu paint-order und vector-effect (kommt noch) # 3. [**SVG/Farben/Markierungen**](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen) * völlig neu aufgebaut - das hatte ich 2015 auf die Schnelle gemacht * [1. Bsp ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-marker-1.html)erklärt markerUnits * Interessant wird's bei [context-fill_und_context-stroke](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen#context-fill_und_context-stroke). Werft mal euren Firefox an, wenn ihr den noch auf der Platte habt und schaut euch das an. (*BTW: Ohne schließenden body-Tag stürzt Frickl ab! Hatte 10min gesucht, warum - immerhin hatte der W3C- Validator nicht gemeckert.*) Fazit: Markierungen sind wie Verläufe mächtige Werkzeuge, jeodch eben deshalb im Alltag nicht zu gebrauchen Das galt für SVG-filter gneauso, die Umsetzung der Algorithmen in CSS finde ich genial, wenn man das bei marker doch auch so machen könnte: ~~~ CSS polyline { marker-knockout-left: 10px circle; marker-knockout-right: 10px circle; } ~~~ [](/images/9481e8bc-1fa8-11ee-bdce-b42e9947ef30.svg) Es lag wohl an Rendering-Problemen bei gekrümmten Pfaden, dass das nicht implementiert wurde. *(Oder jemand hat sch an den 10px für dimensionsloe Einheiten gestoßen)* [](/images/d7aa8ca6-1fa9-11ee-80a6-b42e9947ef30.svg) Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet: [](/images/6faa9c36-1fa9-11ee-81aa-b42e9947ef30.png) Was haltet ihr davon? So können wir Icons und mehr Links oder einen längeren Linktext kombinieren. > Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch! > > > > > Herzliche Grüße > > Matthias Scharwies > Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

Guten Morgen! Ich habe [**SVG/Farben**](https://wiki.selfhtml.org/wiki/SVG/Farben) neu sortiert: # 1. [Painting - wie wird in SVG „gemalt“?](https://wiki.selfhtml.org/wiki/SVG/Farben#Painting_-_wie_wird_in_SVG_.E2.80.9Egemalt.E2.80.9C.3F) * sehr kurze Einführung * nur 3 Bsp. zu fill, fill-rule und fill-opacity # 2. [SVG/Farben/Kontur](https://wiki.selfhtml.org/wiki/SVG/Farben/Kontur) * weitgehend gleich geblieben * unten 2 Bsp zu paint-order und vector-effect (kommt noch) # 3. [**SVG/Farben/Markierungen**](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen) * völlig neu aufgebaut - das hatte ich 2015 auf die Schnelle gemacht * [1. Bsp ](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-marker-1.html)erklärt markerUnits * Interessant wird's bei [context-fill_und_context-stroke](https://wiki.selfhtml.org/wiki/SVG/Farben/Markierungen#context-fill_und_context-stroke). Werft mal euren Firefox an, wenn ihr den noch auf der Platte habt und schaut euch das an. (*BTW: Ohne schließenden body-Tag stürzt Frickl ab! Hatte 10min gesucht, warum - immerhin hatte der W3C- Validator nicht gemeckert.*) Fazit: Markierungen sind wie Verläufe mächtige Werkzeuge, jeodch eben deshalb im Alltag nicht zu gebrauchen Das galt für SVG-filter gneauso, die Umsetzung der algorithmen in CSS finde ich genial, wenn man das bei marker eben auch so machen könnte: ~~~ CSS polyline { marker-knockout-left: 10px circle; marker-knockout-right: 10px circle; } ~~~ Es lag wohl an Rendering-Problemen bei gekrümmten Pfaden, dass das nicht implementiert wurde. *(Oder jemand hat sch an den 10px für dimensionsloe einheiten gestoßen)* [](/images/9481e8bc-1fa8-11ee-bdce-b42e9947ef30.svg) [](/images/d7aa8ca6-1fa9-11ee-80a6-b42e9947ef30.svg) Und dieses „Icon“ habe ich gleich bei den Cards weiterverwendet: [](/images/6faa9c36-1fa9-11ee-81aa-b42e9947ef30.png) Was haltet ihr davon? So können wir Icons und mehr links oder einen längeren Linktext kombinieren. > Wer Ideen hat - immer her damit! Ich frag euch sonst Mittwoch am Stammtisch! > > > > > Herzliche Grüße > > Matthias Scharwies > Herzliche Grüße Matthias Scharwies -- Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!