web-dev-qa-db-fra.com

Coin arrondi uniquement sur un côté du svg <rect>

J'essaie d'implémenter un graphique à barres comme un diagramme. J'ai l'élément html suivant

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

Je veux donner au haut le coin du rectangle une forme arrondie. Comment est-ce possible?
Je ne peux pas appliquer la propriété border-radius.

htmlcsssvg
20
Dhanya

Comme l'a commenté Robert Longson vous devez convertir votre élément rect en élément path pour contrôler les coins arrondis.

Dans l'exemple suivant, j'ai utilisé une courbe de Bézier cubique avec la commande Q pour créer le coin arrondi en haut à gauche (Q1 1 5 1 dans l'attribut d):

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>
9
web-tiki

Vous pouvez également utiliser clipPath. C'est une sorte de hack mais il peut être plus facile à mettre en œuvre.

En supposant ce qui suit:

  • votre rect est width="10"height="51"
  • le coin supérieur sera rx="5" et ry="5"
<svg>
        <defs>
            <clipPath id="round-corner">
                <rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
            </clipPath>
        </defs>

        <!-- if you want to use x="35" y="-135" put clip-path on a `g` element --> 
        <rect width="10" 
              height="51" 
              clip-path="url(#round-corner)"
              style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
    </svg>

Quelques notes:
Alors le clipPath > rect > width est exactement le même que votre rect.

Au lieu de clipPath > rect > height vous devez considérer le rayon du coin en haut et donc la hauteur doit être rect.height + desired-corner-radius (dans ce cas 51px + 5px).

De cette façon, vous ne toucherez pas la partie inférieure de votre rect avec le clipPath.

5
borracciaBlu

Utilisez le <path> élément avec la commande arc ( http://devdocs.io/svg/attribute/d#arcto ).

Syntaxe: 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>
4
adius

A écrit un article expliquant cela https://medium.com/@dphilip/one-side-rounded-rectangle-using-svg-fb31cf318d9

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path
    d="M10,40
       h50
       q5,0 5,5
       v10
       q0,5 -5,5
       h-50
       z
    "
    fill="#4EDFA5"
  >
<svg>
2
Dennis Mathew Philip