SVG : Comment animer la hauteur d'un chemin?

Question

Je suis en train de créer les bords arrondis en utilisant la balise svg rect. Mais rx et ry créent des bords arrondis sur les quatre côtés. Au lieu de cela, je souhaite créer uniquement deux bords (en haut à gauche et en haut à droite). J'ai fait la même chose avec la commande path (Fonctionne sur JS Fiddle).

La raison de créer rect est que j'essaie de créer une hauteur animée qui grandit.

---

MODIFIÉ

Le code suivant donnera les coins arrondis que j'attendais. J'ai utilisé la méthode de la Courbe Cubique.

Ma question/problème est que lorsque je crée l'animation dans le path, la hauteur ne grandit pas avec l'animation.

Answer 1

Vous pouvez utiliser la transformation scaleY() de CSS3 pour créer l'animation souhaitée.

Initialement, votre path aura une valeur de scaleY(0) (il se comportera comme si l'élément avait une height: 0) et nous l'animerons jusqu'à scaleY(1).

Le CSS suivant sera nécessaire pour cela:

path {
  transform: scaleY(0);
  transform-origin: center bottom;
  animation: draw 1.5s linear forwards;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

Démonstration fonctionnelle :

.draw {
  animation: draw 1.5s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: rgb(216, 62, 62);
  transform: scaleY(0);
  stroke-width: 2px;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

Answer 2

  Désolé, votre navigateur ne supporte pas SVG en ligne.

C'est un peu délicat et cela fera l'affaire. C'est un exemple, vous pouvez faire la même chose avec le vôtre aussi.

Answer 3

Pour des coins arrondis uniquement en haut, vous pouvez utiliser ceci en css

border-top-left-radius
border-top-right-radius

Voici un exemple ci-dessous.

img{ width:100%;
height:100%;
border-top-left-radius:20px;
border-top-right-radius:20px;
}