Abgerundete Ecke nur auf einer Seite von Svg Rect

Question

Abgerundete Ecke nur auf einer Seite von Svg Rect

8

Ich versuche ein Balkendiagramm wie Diagramm zu implementieren. Ich habe das folgende HTML-Element

%Vor%

Ich möchte der oberen Ecke des Rechtecks eine abgerundete Form geben . Wie ist es möglich? Ich kann keine border-radius-Eigenschaft anwenden.

html svg css3

Dhanya 21.01.2016, 12:29

quelle

3 Antworten

Tags und Links html svg css3

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie schreibe ich eine Haskell Pipes "sum" -Funktion?

score 4 · Answer 1

Wie von Robert Longson kommentiert, müssen Sie Ihr rect-Element in ein pfadelement , um die abgerundeten Ecken zu steuern.

Im folgenden Beispiel habe ich eine kubische Bezier-Kurve verwendet Mit dem Befehl Q wird die abgerundete obere linke Ecke erstellt ( Q1 1 5 1 im Attribut d ):

%Vor% %Vor%

score 1 · Answer 2

1

Verwenden Sie das <path> -Element mit dem arc -Befehl ( Ссылка ).

Syntax: a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy

%Vor%

adius 10.01.2018 14:04

quelle

score 1 · Answer 3

Sie können auch clipPath verwenden. Es ist eine Art Hack, aber es könnte einfacher zu implementieren sein.

Nehmen wir Folgendes an:

Ihr Rect ist width="10" height="51"
die obere Ecke wird rx="5" und ry="5" sein

%Vor%

Einige Anmerkungen:
Also, der Clip mit ist genau der gleiche wie du rect , weil du den Eckenradius oben haben willst und der clipPath ist genau rect.height + desired-corner-radius .

Auf diese Weise werden Sie nicht den unteren Teil Ihres Rect mit dem clipPath berühren.