J'essaie de créer une animation svg, comme le montre la démo lorsque je redimensionne le remplissage de charge de svg, il a été poussé vers le bord gauche du conteneur.
Est-il possible de conserver les attributs x, y du chemin dans le svg? Ou mon svg est-il impossible à animer correctement?
<div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100"> <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/> <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/> </svg> </div>
.svg { width: 40%; } #charge { /* animation: charge 1s ease infinite; */ transform: scaleX(0.1); } @keyframes charge { 0% { transform: scaleX(0.1); } 100% { transform: scale(1); } }
3 Réponses :
Vous pouvez à la place animer la largeur
pour obtenir l'effet souhaité:
<div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100"> <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/> <rect id="charge" x="10" y="10" fill="#0071BC"/> </svg> </div>
.svg { width: 40%; } #charge { width: 10px; height: 80px; animation: charge 1s ease infinite; } @keyframes charge { 0% { width: 0; } 100% { width: 180px; } }
Vous pouvez utiliser transform-origin
vous permet de changer la position des éléments de transformation. Les valeurs par défaut sont 50%, 50%, ce qui fait que vos transformations commencent au milieu de l'élément.
<div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100"> <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/> <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/> </svg> </div>
.svg { width: 40%; } #charge { transform-origin: 10px; animation: charge 1s ease infinite; transform: scaleX(0.1); } @keyframes charge { 0% { transform: scaleX(0.1); } 100% { transform: scale(1); } }
Pour éviter de définir une valeur de pixel sur transform-origin
, vous pouvez également ajuster la transform-box
pour avoir le transform-origin
par rapport à l'élément et non le SVG entier:
<div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100"> <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/> <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/> </svg> </div>
.svg { width: 40%; } #charge { transform-origin: left; transform-box:fill-box; animation: charge 1s ease infinite; transform: scaleX(0.1); } @keyframes charge { 0% { transform: scaleX(0.1); } 100% { transform: scale(1); } }