Maskieren in SVG

[Rolf B]

Hallo,

ich möchte in SVG aus einem Rechteck etwas ausschneiden. Das Rechteck hat abgerundete Ecken und der Ausschnitt geht in die Rundung hinein, deshalb kann ich nicht einfach einen path nehmen und den betreffenden Bereich nicht zeichnen.

Es geht letztlich um das Link-Chain Icon. Die Variante, in der die Rundung so klein ist, dass ich mit dem Path zurecht komme, sieht in Icongröße zu eckig aus.

So ist es jetzt:

Ich muss die Rundung so weit machen, dass ich in den Ausschnittbereich hinein komme, wo das "senkrechte" Kettenglied sitzt. So wie hier, im alten Link-Chain Icon:

Warum mach ich das? Weil mich solche SVGs nerven. Da ist die Kontur um die schwarze Fläche gezeichnet und das wird gefüllt. Dabei könnte man das doch viel einfacher als eine Linie mit entsprechendem Stroke lösen. Ja. Wenn dann nicht die Kleinigkeiten kämen 😉

Also - ich möchte ein Rechteck malen:

<rect x="0" y="0" width="270" height="180" rx="70" 
      stroke="gold" stroke-width="60" fill="none"></rect>

Und ich möchte auf seiner rechten oder linken Seite einen Streifen der Höhe 80 ausblenden, auf halber Höhe. Dieser Streifen überlappt einen Teil der Rundung. Also so:

Der graue Bereich soll die Maske symbolisieren, da, wo die Umrandung wegfallen soll. Ich kann da nicht einfach mit weiß drübermalen, das Icon soll an den weißen Stellen transparent sein.

Ich möchte diese Maskierung so haben, dass ich das maskierte Rechteck nachher transformieren kann (rotate, transform). Das Problem ist: der Stroke des Rechtecks liegt auf dem Außenrand des SVG-Elements. D.h. durch den Stroke wird das Rechteck in jeder Richtung um 30 Einheiten größer. Ich muss den Weißbereich der Maske also dementsprechend vergrößern, damit nicht der äußere Teil des Stroke abgeschnitten wird. Aber - da gibt es offenbar im SVG eingebaute Limits, selbst wenn ich y=-0.5 und height=2 setze, wird nicht der ganze Stroke gezeichnet.

https://jsfiddle.net/uL5b9zxj/

Wie macht man das richtig?

Rolf

[Felix Riesterer]

Lieber Rolf,

Dabei könnte man das doch viel einfacher als eine Linie mit entsprechendem Stroke lösen.

ist das in der Tat „viel einfacher“?

Ja. Wenn dann nicht die Kleinigkeiten kämen 😉

Scheint also eher nicht so.

Also - ich möchte ein Rechteck malen:

Ist das der richtige Ansatz? Wenn man Deine Idee zu Ende denkt, dann scheitert man, weil die Linie Deines Rechtecks keinen visuellen Anfang und kein visuelles Ende hat. Deswegen hast Du auch keinen Einfluss auf die Strichenden (stroke-linecap), um das von Dir gewünschte zu erreichen.

Wenn Du mittels stroke etwas erreichen möchtest, dann brauchst Du in der Tat einen Pfad, der das aufgebrochene Kettenglied abbildet, damit Du dessen offene Enden gestalten kannst (z.B. mit butt oder square). Das Kettenglied, das man nur von der Seite aus sieht, ist ein Strich, dessen Enden eben mit stroke-linecap:round gestylt sind. Der ist in der Tat recht einfach umzusetzen.

Deine grundsätzliche Überlegung, das mit einem Pfad zu lösen, hätte den Reiz, dass man das offene Kettenglied nur einmal definiert und dann mittels transform zweimal in das Bild schreiben lässt - natürlich passend gedreht und positioniert.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

Wenn man Deine Idee zu Ende denkt, dann scheitert man, weil die Linie Deines Rechtecks keinen visuellen Anfang und kein visuelles Ende hat.

Deswegen ja die Idee mit der Maske. Wenn ich ein path Element verwende, schaffe ich es nicht, die Enden parallel zu dem „Verbindungsglied“ zu beenden. Weil die 90° Kurve vorzeitig abgeschnitten wird und das Linienende orthogonal zum Pfad ist. Der Weißraum soll ja auch nur den Übergang zwischen den Kettengliedern deutlich machen.

Ich kann dem Verbindungsglied auch keinen weißen Rand geben (also ein Rechteck mit 50% Eckradius und weißem stroke), weil ich dort ja Transparenz haben will 😡...

Rolf

[Michael_K]

Hallo Rolf,

Wie macht man das richtig?

Hilft das dir weiter: https://jsfiddle.net/gwrpvoth/1/

Gruß Michael

[Rolf B]

Hallo Michael,

schau ich mir in Ruhe an. Danke erst mal!

Rolf

[Rolf B]

Hallo Michael,

das ist eine clevere Idee. Man zeige ein gefülltes, goldenes Rechteck und maskiere alles weg, was nicht nach Kettenglied aussieht. D.h. der Stroke ist Teil der Maske, nicht des rect-Elements. Damit ist das „Überlaufproblem“ eliminiert.

Danke!

Rolf

[Felix Riesterer]

Lieber Rolf,

Man zeige ein gefülltes, goldenes Rechteck und maskiere alles weg, was nicht nach Kettenglied aussieht.

ich dachte, Du wolltest „einfach“...?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

kommt immer darauf an, was einfach sein soll 🤣.

Mein SVG-Markup hat jetzt dieses minimalistische Aussehen:

<g id="dark"></g>
<g id="chain">
	<g id="flats">
		<rect /><rect />
	</g>
	<g id="bridge">
		<rect />
		<circle /><circle />
	</g>
</g>

Dass der bridge-Bereich eine Gruppe ist, hat 2 Gründe:

• x1, x2 sind keine Presentation-Attribute, ich kann ein <line> Element also nicht per CSS positionieren und in den Attributen auch nicht mit var() arbeiten. Ich KÖNNTE natürlich mit transform arbeiten, aber je nach Skalierung bleiben die Linienenden dann nicht kreisförmig.
• rx, ry sind zwar Presentation-Attribute, aber nicht für Safari.

Deswegen kann ich das Brückenglied, das eigentlich ein einfacher Strich sein könnte, nicht mit CSS-Kontrolle als Strich zeichnen. Und auch nicht als rect mit abgerundeten Ecken. Es ist ein Rechteck, und die „Linienenden“ sind zwei darauf gemalte Kreise.

Die übrigen 80 Zeilen im SVG sind SVG-Rahmen, Maskendefinition und Styles

Die #flats-Rechtecke:

:root {
	--width: 250px;     /* Von Linienmitte zu Linienmitte */
	--height: 180px;
	--thickness: 70px;
	--corner: 70px;
	--gap: 10px;
	--xwidth: calc(var(--width) + var(--thickness));
	--xheight: calc(var(--height) + var(--thickness));
}
#chain {
	color: black;
	transform: translate(300px, 300px) rotate(-45deg);
}
#flats rect {
	--rotate: 0deg;
	x: calc(-0.5 * var(--xwidth));
	y: calc(-0.5 * var(--xheight));
	width: var(--xwidth);
	height: var(--xheight);
	stroke: none;
	stroke-width: 0px;
	fill: currentColor;
	transform: rotate(var(--rotate)) 
	           translate(calc(var(--thickness) - var(--width)), 0px);
	mask: url(#chainlink);
}
#flats rect:nth-of-type(1) {
	--rotate: 180deg;
}

Die zugehörige #chainlink Maske ist:

<style>
#chainlink rect.link {
	x: calc(-0.5 * var(--width));
	y: calc(-0.5 * var(--height));
	width: var(--width);
	height: var(--height);
	rx: var(--corner);	/* Not in Safari - attr as fallback */
	ry: var(--corner);	
	stroke: white; /* white: visible part */
	stroke-width: var(--thickness);
	fill: none;
}
#chainlink rect.gap {
	--gheight: calc(2*var(--gap) + var(--thickness));
	x: 0px;
	y: calc(-0.5 * var(--gheight));
	width: calc(0.55 * var(--xwidth)); /* Allow for rounding errors */
	height: var(--gheight);
	stroke: none;
	fill: black;  /* black: hidden part */
}
</style>
<mask id="chainlink">
	<rect class="link" rx="12%" ry="12%"></rect>
	<rect class="gap" ></rect>
</mask>

Die 12% sind eine ganz gute Annäherung an --corner:70px. Leider geht's im Safari nicht anders, sagt MDN, und ich weiß noch nicht, ob es überhaupt funktioniert.

Die Brücke sieht so aus:

#bridge rect {
	x: calc(-0.5*var(--width)); 
	y: calc(-0.5*var(--thickness));
	width: var(--width);
	height: var(--thickness);
	stroke-width: 0;
	fill: currentColor;
}
#bridge circle {
	cx: calc(0.5 * var(--width));
	cy: 0;
	r: calc(0.5 * var(--thickness));
	fill: currentColor;
}
#bridge circle:nth-of-type(2) {
	cx: calc(-0.5 * var(--width));
}

Und schließlich noch die Dark-Mode Umschaltung:

#dark:target ~ #chain {
	color: gold;
}

D.h. wenn ich das SVG mit link_chain.svg#dark abrufe, wird die Kette golden dargestellt. Sonst schwarz. Auch ein Safari-Zugeständnis, @media (prefers-color-scheme:dark) funktioniert da nicht.

Sieht wüst aus, aber dafür kann ich nun ganz einfach die Größe und Dicke der Kettenglieder einstellen. Sie werden automatisch richtig platziert und die visuelle Lücke in den flachen Gliedern passt sich automatisch an.

Die Darstellung erfolgt so, dass die #flats-Rechtecke zunächst mit Mittelpunkt (0,0) gezeichnet und dann gerade soweit zur Seite verschoben werden, dass die flachen Glieder und das Brückenglied einander exakt mit den Innenkanten berühren, passend zu Seitenlänge (--width) und Materialdicke (--thickness) der Glieder. Das Brückenglied wird symmetrisch zu (0,0) gezeichnet.

Danach wird das Ganze um 45° gegen die Uhr gedreht und nach (300,300) geschoben, damit es mittig in der 600×600 Viewbox sitzt. Das kann man vielleicht auch ohne die Transforms machen, aber dann bekäme ICH Kopfschmerzen über die nötigen Rechenschritte.

Wenn das SVG online ist, gebe ich noch mal Bescheid.

Rolf

[Auge]

Hallo

Deswegen kann ich das Brückenglied, das eigentlich ein einfacher Strich sein könnte, nicht mit CSS-Kontrolle als Strich zeichnen. Und auch nicht als rect mit abgerundeten Ecken. Es ist ein Rechteck, und die „Linienenden“ sind zwei darauf gemalte Kreise.

Wäre ein <path /> mit zwei 180°-Bögen und einer Verbindungslinie, dessen Pfad auf der der Verbindungslinie gegenüberliegenden Seite per z geschlossen wird, nicht einfacher als ein Rechteck und zwei Kreise?

…

Danach wird das Ganze um 45° gegen die Uhr gedreht und nach (300,300) geschoben, damit es mittig in der 600×600 Viewbox sitzt. Das kann man vielleicht auch ohne die Transforms machen, aber dann bekäme ICH Kopfschmerzen über die nötigen Rechenschritte.

Nach meiner Erfahrung ist transform für die Drehung, Skalierung und Positionierung geometrisch konstruierter Objekte genau das richtige Werkzeug. Du willst die, soweit es geht, mit geraden Linien konstruieren und das unter keinen Umständen mit umständlichen Berechnungen gleich im gewünschten Winkel, außer du bist schmerzpervers.

Tschö, Auge

[Rolf B]

Hallo Auge,

Wäre ein <path /> mit zwei 180°-Bögen und einer Verbindungslinie, dessen Pfad auf der der Verbindungslinie gegenüberliegenden Seite per z geschlossen wird, nicht einfacher als ein Rechteck und zwei Kreise?

Solange das d-Attribut konstant ist, ja. Aber ich habe custom properties drin. Wie baut man custom properties in Pfade ein? Mich deucht, da fehlt noch was im CSS. Weder die custom property noch die shape Spec geben dazu etwas her, Tante Google zeigt sich ahnungslos und Onkel Chat meint nur: dat geht nich.

Nach meiner Erfahrung ist transform für die Drehung, Skalierung und Positionierung geometrisch konstruierter Objekte genau das richtige Werkzeug

Ich bin offen für Vorschläge. Wie erzeugst Du das Brückenglied der Kette (also das, was "hochkant" steht), aus einer Basisform in unterschiedlichen Längen und Stärken, unter Beibehaltung eines halbkreisförmigen Linienendes, mit Vorgabe von Länge und Stärke per custom property? Kein JS bitte, das wird in externen SVG-Bildern nicht ausgeführt (oder? denke ich zumindest…)

Rolf

[Auge]

Hallo

Wäre ein <path /> mit zwei 180°-Bögen und einer Verbindungslinie, dessen Pfad auf der der Verbindungslinie gegenüberliegenden Seite per z geschlossen wird, nicht einfacher als ein Rechteck und zwei Kreise?

Solange das d-Attribut konstant ist, ja. Aber ich habe custom properties drin. Wie baut man custom properties in Pfade ein?

Warum willst du das überhaupt tun? Warum soll die Geometrie des Kettengliedes nicht unveränderlich sein (Womit die Notwendigkeit, das per CSS und CSS-Variablen zu steuern, entfiele)?

Die Kettenglieder per Attributwerten zu definieren und „nur“ die Farbgebung und derlei Dinge per CSS zu steuern, wäre wohl zu einfach?

Ich bin offen für Vorschläge. Wie erzeugst Du das Brückenglied der Kette (also das, was "hochkant" steht), aus einer Basisform in unterschiedlichen Längen und Stärken, unter Beibehaltung eines halbkreisförmigen Linienendes, mit Vorgabe von Länge und Stärke per custom property?

Nochmal, warum sollte ich das wollen? Mir erschließt sich dein Bedarf dafür nicht. Wenn das ein Icon ist, soll das doch immer identisch aussehen, oder?

Ich bin, gelinde gesagt, verwirrt.

Tschö, Auge

[Rolf B]

Hallo Auge,

Warum willst du das überhaupt tun?

Weil ich's kann 😉

Warum soll die Geometrie des Kettengliedes nicht unveränderlich sein (Womit die Notwendigkeit, das per CSS und CSS-Variablen zu steuern, entfiele)? Die Kettenglieder per Attributwerten zu definieren und „nur“ die Farbgebung und derlei Dinge per CSS zu steuern, wäre wohl zu einfach?

Genau.

Du hast ja recht. Wenn der Gaul erstmal im Galopp ist, stoppt er erst, wenn er gegen die Wand gerannt ist…

Es war aber tatsächlich so, dass ich durch diese Variabilität mit den Größenverhältnissen spielen und nach dem „schönsten“ Aussehen forschen konnte. Vielleicht mache ich daraus jetzt die heruntergedummte Version mit fixen Werten…

Rolf

[Auge]

Hallo

Warum willst du das überhaupt tun?

Weil ich's kann 😉

Warum soll die Geometrie des Kettengliedes nicht unveränderlich sein … [das] wäre wohl zu einfach?

Genau.

Du hast ja recht. Wenn der Gaul erstmal im Galopp ist, stoppt er erst, wenn er gegen die Wand gerannt ist…

😅

Es war aber tatsächlich so, dass ich durch diese Variabilität mit den Größenverhältnissen spielen und nach dem „schönsten“ Aussehen forschen konnte.

Das kann ich prinzipiell nachvollziehen. Für soetwas bei jeder Veränderung mehrere Werte der Bogenradien im Attribut d anpassen zu müssen, ist überaus mühselig. Aber außerhalb eines solchen Forschungsprojekts ist das Mumpitz, erst recht, wenn notwendige Features von einzelnen Browsern nicht unterstützt werden.

Vielleicht mache ich daraus jetzt die heruntergedummte Version mit fixen Werten…

Naja, das kannst du ja machen, nachdem du die passenden Dimensionen in einem Browser, mit dem du forschen kannst, gefunden hast.

Tschö, Auge

[Michael_K]

Hallo

Das kann ich prinzipiell nachvollziehen. Für soetwas bei jeder Veränderung mehrere Werte der Bogenradien im Attribut d anpassen zu müssen, ist überaus mühselig. Aber außerhalb eines solchen Forschungsprojekts ist das Mumpitz, erst recht, wenn notwendige Features von einzelnen Browsern nicht unterstützt werden.

ich ignoriere mal die gewählte Wortwahl, würde aber doch dieser Sichtweise widersprechen. Und ich hoffe, dass Rolf das finale "Ergebnis" irgendwo teilt bzw. einsehbar ist (denn ich würde gerne noch etwas mehr lernen, wie weit CSS iVm SVG dynamisch umgesetzt werden kann).

Gerade im Kontext von SCSS ist es von hoher Bedeutung, dass man bei Bedarf für die eigenen Wünsche nur die Variablen anpassen muss (um sich ein individuelles CSS-Theme/Franmework zu erstellen). Dies reduziert die Komplexität.

Gruss Michael

[Auge]

Hallo

Das kann ich prinzipiell nachvollziehen. Für soetwas bei jeder Veränderung mehrere Werte der Bogenradien im Attribut d anpassen zu müssen, ist überaus mühselig. Aber außerhalb eines solchen Forschungsprojekts ist das Mumpitz, erst recht, wenn notwendige Features von einzelnen Browsern nicht unterstützt werden.

ich ignoriere mal die gewählte Wortwahl …

???

… würde aber doch dieser Sichtweise widersprechen. Und ich hoffe, dass Rolf das finale "Ergebnis" irgendwo teilt bzw. einsehbar ist (denn ich würde gerne noch etwas mehr lernen, wie weit CSS iVm SVG dynamisch umgesetzt werden kann).

Wenn du meinen nächsten Absatz auch noch gelesen hättest, wüsstest du, dass ich ihm keineswegs von CSS in SVG abrate. Wenn du seine anderen Postings auch noch gelesen hättest, wüsstest du auch, dass einzelne Features der gewünschten Umsetzung mit CSS nicht überall funktionieren werden, weil eben „notwendige Features von einzelnen Browsern nicht unterstützt werden“.

Das so für den Produktiveinsatz umsetzen zu wollen, wissend, dass das nicht in allen Browsern funktionieren wird, ist demnach nicht möglich und somit Mumpitz.

Gerade im Kontext von SCSS ist es von hoher Bedeutung, dass man bei Bedarf für die eigenen Wünsche nur die Variablen anpassen muss (um sich ein individuelles CSS-Theme/Franmework zu erstellen).

Braucht man heutzutage noch SCSS (oder SASS)? Ich habe das einstmals ein paar mal ausprobiert und für meine Bedarfe verworfen. Für mich reicht die native Funktionalität von CSS, spätestens, seitdem man Regeln verschachteln und damit Geltungsbereiche spezifischer steuern kann.

Tschö, Auge

[Rolf B]

Hallo Auge,

vielleicht hat er sich am „Mumpitz“ gestört - aber wir arbeiten hier im Forum schon Jahre zusammen und sowas nehme ich Leuten, deren Know-How ich respektiere, nicht übel.

Die fehlende Browserfunktion bedeuten für mich jetzt nicht, dass ich ein SVG baue, das nicht überall funktioniert. Es soll ja überall funktionieren, weshalb ich eben ein <rect> Element, dessen rx per CSS gesetzt wird, nicht verwenden darf. Mein Workaround sind die zwei Kreise.

Bezüglich der CSS Präprozessoren wie SASS/SCSS/LESS denke ich, dass die einen anderen Fokus haben. Sie werden sinnvollerweise serverseitig ausgeführt, bevor das CSS-Compilat ausgeliefert wird, und das bedeutet, dass sie nichts von den Umgebungseinstellungen der Besucher*innen wissen. Das geht nur mit @media oder implizit mit der light-dark()-Funktion. Da diese beiden Abfragen vom Safari nicht in SVGs beachtet werden, habe ich das CSS des Wiki so geändert, dass das SVG mit einem Hash aufgerufen wird: link_chain1.svg#dark. Im SVG gibt's ein g-Element mit id="dark" und wenn ich im SVG-Stylesheet #dark:target verwende, kann ich auf die Existenz dieses Hashmark testen und die Farbe von schwarz auf Selfgelb (oder gold) ändern.

Hinzufügen von #dark geschieht durch eine @media-Query im Wiki-Stylesheet.

Das ist im Wiki in /skins/Makeover/content-screen.css und /skins/Makeover/images/link_chain1.svg zu sehen.

Der Makeover-Skin kann von jedem Besucher über die Wiki-Benutzereinstellungen (Aussehen) ausgewählt werden, ist aber noch im Prä-Beta Status. Also, angucken gerne, aber auf eigene Gefahr 😀. Im Gegensatz zum Selfhtml-Skin funktioniert dort der Darkmode (größtenteils). Nach Fertigstellung wird er über den aktuellen Selfhtml-Skin drüberkopiert, da muss also nicht jeder seine Einstellungen ändern.

Rolf

[Mitleser 2.0]

Ich hab das jetzt alles als maximal Halbwissender nur halbwegs überflogen und noch weniger im Detail verstanden: ist das jetzt wirklich wichtig oder nur ein Expermintalflug über potentielle Maximallösungen, die man obendrein noch mit Browser-Quirks bedienen muss?

Manchmal ist ein Symbol doch nur ein Symbol, oder?!

[Rolf B]

Hallo Mitleser 2.0,

Manchmal ist ein Symbol doch nur ein Symbol, oder?!

Ja. Und machmal ist ein Symbol der Anlass, ein Thema genauer zu erkunden.

Das Symbol wird dann zur Nebensache. Viel interessanter ist, was genau im Browser passiert und welchen Regeln er folgt. Da es mittlerweile mehr Specs gibt als Flöhe auf einem Straßenköter (und sie sich mindestens so schnell vermehren), sind solche Erkundungen wichtig, um bei den im Wiki beschriebenen Themen halbwegs up-to-date zu bleiben. Und wenn man Dinge erklären können will, muss man auch wissen, warum manches so und nicht anders läuft.

Mein Ausgangsproblem habe ich immer noch nicht lösen können: Warum wirken Masken nur bis zu einem bestimmten Bereich um das SVG Element herum. Für das Anliegen "Symbol" habe ich ein Workaround bekommen. Aber was ich bei dem Versuch falsch mache, den über das Element-Rechteck hinausgehenden Stroke zu maskieren, ist offen.

Bei der Gelegenheit habe ich dann gelernt/aufgefrischt, dass der Safari eine Implementierungslücke bei rx/ry und bei bestimmten Mediaqueries hat, und dass <line> Elemente sowie SVG-Pfade generell störrisch sind, wenn es um CSS geht. Das ist aus meiner Sicht durchaus ein Gewinn. Für die Profis unter euch war das vielleicht ein uninteressanter alter Hut. Für mich nicht.

Rolf

[Michael_K]

Freut mich, dass ich dir auch einmal helfen konnte. Aber ich habe ja auch im Quellcode aufgeführt, dass die Lorberen nicht mir gehören.

Gruss Michael