SVG прядильщик не вращается на Origin

Question

Я использую тэг img, обернутый div, чтобы отобразить прядильщик svg. div имеет на нем вращающуюся анимацию. Знаете ли вы, почему он не вращается по происхождению и почему перекрываются линейные прядильщики?

Я не могу использовать SVG animationTransform, потому что IE не поддерживает его. Поскольку это простой счетчик, я надеялся повернуть только div и получить эффект загрузки.

Вот plunkr демо:

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> 

/* Стили идут сюда */

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%; 
} 

Добавление выше CSS для детей Elemen ts помогли немного, но встроенные прядильщики все еще не вращаются по происхождению.

Answer 1

Причины ваш инлайн-блесны имеют смещение в преобразовании координат происходит потому, что по умолчанию line-height (28px) берет на вашу высоту, поэтому сброс, что вам решить проблему происхождения:

.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

Я посмотрел на ваш plunkr, хотя я не верю, что могу ответить на вопрос о происхождении, встроенные прядильщики - это легкое решение.

У вас есть width и height, установленный в 20px (который составляет лишь половину от их фактического размера).

Установите spinner-inline CSS для:

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

И они больше не будут пересекаться.

* Кроме того, похоже, что это означает, что спиннеры также вращаются по источнику.