Abgerundete Ecke nur auf einer Seite von Svg <rect>

Ich versuche, ein Balkendiagramm wie Diagramm zu implementieren. Ich habe das folgende HTML-ElementAbgerundete Ecke nur auf einer Seite von Svg <rect>

<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>

ich oben Ecke des Rechtecks eine abgerundete Form geben will. Wie ist es möglich?
Ich kann keine border-radius-Eigenschaft anwenden.

Quelle

2016-01-21 Dhanya

Man müßte es auf einen Pfad konvertieren und die Ecken mit elliptischen Bögen modellieren. –

Wie von Robert Longson kommentiert, müssen Sie Ihr Rect-Element in ein path element konvertieren, um die abgerundeten Ecken zu steuern.

In dem folgenden Beispiel verwendete ich ein cubic bezier curve mit dem Q Befehl, um die obere linke abgerundete Ecke (Q1 1 5 1 im d Attribut) zu bilden:

svg{ 
 
    height:90vh; 
 
    width:auto; 
 
    }

<svg viewbox="0 0 10 50"> 
 
    <path d="M1 49 V5 Q1 1 5 1 H9 V49z" 
 
     fill="rgba(255, 122, 0, 0.8)" /> 
 
</svg>

Quelle

2016-01-21 13:23:14

Es ist falsch, eine Bezier-Kurve zu verwenden. Eine Bezier-Kurve kann immer nur einen Kreis annähern. Sie müssen den Befehl 'arc' verwenden: http://devdocs.io/svg/attribute/d#arcto – adius

Verwenden der <path> Element mit der Befehl arc (http://devdocs.io/svg/attribute/d#arcto).

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

<svg width="200" height="200" viewBox="0 0 10 10"> 
 
    <path d="M0,8 v-3 a5,5 0 0 1 5,-5 h3 v8 z" /> 
 
</svg>

Quelle

2018-01-10 14:04:16 adius

Abgerundete Ecke nur auf einer Seite von Svg <rect>

Antwort

Verwandte Themen