SVG-Spinner dreht sich nicht auf Origin

Question

Ich verwende ein -Tag von einem div verpackt, um einen Svg Spinner anzuzeigen. Die div hat eine Drehanimation darauf. Weißt du, warum es nicht am Ursprung dreht und warum die Inline-Spinner sich überschneiden?

Ich kann SVG animationTransform nicht verwenden, weil IE es nicht unterstützt. Da es ein einfacher Spinner ist, hatte ich gehofft, nur das div zu drehen und den Ladeeffekt zu bekommen.

Hier ist die plunkr Demo:

https://plnkr.co/edit/jiuI4rlETsNHN1yLbG2k?p=preview

<div class="spinner"> 
    <img src="spinner.svg" alt=""> 
    </div> 
    <div class="spinner"> 
    <img src="spinner.svg" alt=""> 
    </div> 

    <h4>Inline Spinners</h4> 
    <div class="spinner-inline"> 
    <img src="spinner.svg" alt=""> 
    </div> 
    <div class="spinner-inline"> 
    <img src="spinner.svg" alt=""> 
    </div> 

/* Styles gehen hier */

body{ 
    background: #444; 
    color: white; 
} 

.spinner{ 
    display: block; 
    height: 50px; 
    width: 50px; 
    animation: spin 2s linear infinite; 
    transform-origin: 50% 50%; 
} 

.spinner-inline{ 
    display: inline-block; 
    height: 10px; 
    width: 10px; 
    animation: spin 2s linear infinite; 
    transform-origin: 50% 50%; 
} 

@keyframes spin{ 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
} 

Update:

.spinner *{ 
    width: 100%; 
    height: 100%; 
} 


.spinner-inline *{ 
    width: 100%; 
    height: 100%; 
} 

über CSS für Verput Kind Hinzufügen ts halfen ein wenig, aber die Inline-Spinner drehen sich immer noch nicht auf den Ursprung.

Answer 1

Der Grund Ihre Inline-Spinner im Ursprung verwandeln einen Offset haben, ist, weil der Standard line-height (28px) über Ihre Höhe nimmt, so dass Sie den Ursprung Problem Zurücksetzen lösen:

.spinner-inline{ 
    display: inline-block; 
    height: 10px; 
    line-height:0;/*****/ 
    width: 10px; 
    animation: spin 2s linear infinite; 
    transform-origin: 50% 50%; 
} 

https://plnkr.co/edit/mW7BamvPST89ufqNyE8N?p=preview

Answer 2

Ich schaute auf Ihre Plunkr, obwohl ich glaube, dass ich die Ursprungsfrage nicht beantworten kann, ist die Inline-Spinner eine einfache Lösung.

Sie haben die width und height auf 20px (das ist nur die Hälfte ihrer tatsächlichen Größe).

Stellen Sie Ihren spinner-inline CSS:

.spinner-inline{ 
    display: inline-block; 
    height: 40px; 
    width: 40px; 
    animation: spin 2s linear infinite; 
    transform-origin: 50% 50%; 
} 

Und sie werden nicht länger überlappen.

* Alternativ sieht es so aus, als würde die Einstellung dazu führen, dass die Spinner auch beim Ursprung drehen.