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