SVG, polygon mit linear-gradient

[Rolf B]

Hallo Jo,

ich war schon drauf und dran, Dir die CSS-Varianten zu empfehlen, dachte mir aber, dass Du ggf. unbedingt SVG willst weil der clip-path mit CSS Mitteln nicht zu spezifizieren ist (Beispiel: ein clipPath mit mehreren Kreisen).

Dass das SVG eine Größe von 0 haben muss, hat den Sinn, dass es nicht sichtbar ist. Du hast es ja im HTML drin. Würdest Du das SVG als externe URL laden, dann würde ich annehmen, dass das unötig ist.

Der clipPath aus dem SVG skaliert nicht, weil die clipPathUnits falsch sind. Der Default ist userSpaceOnUse, was laut MDN angibt, dass „all coordinates inside the <clipPath> element refer to the user coordinate system as defined when the clipping path was created.“. Das habe ich nicht wirklich verstanden, denn dann müsste der clipPath mit der Größe des SVG skalieren. Tut er aber nicht.

Der andere mögliche Wert für clipPathUnits ist objectBoundingBox. Dann skaliert der clipPath mit dem Container, in dem er sich befindet. Wichtig ist dann nur, dass die Größe des Containers in x- und y-Richtung mit 1 angenommen wird, d.h. Du gibst deine Maße als Werte zwischen 0 und 1 an.

Fiddle: Clippath aus 4 Kreisen

Rolf