Вращающегося путь SVG с помощью CSS3 вокруг своего центра

У меня есть набор пути SVG, один из них заключаются в следующем:Вращающегося путь SVG с помощью CSS3 вокруг своего центра

<path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z 
    M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"></path>

Я пытаюсь сделать поворот-анимацию с кодом ниже:

.stuck #GOL 
{ 
    fill: red; 
    transform: rotate(90deg); 
} 

#GOL 
{ 
    transition-property: all; 
    transition-duration: 2s; 
}

Проблема в том, что путь вращается вокруг центра расстояния, который не является регулярным. Я хочу, чтобы он вращался вокруг своего центра. Я должен использовать CSS3 (поэтому я не могу использовать собственную функцию rotate() svg).

источник

2016-12-19 Mostafa Talebi

Вы, вероятно, нужно JS, чтобы определить центр формы пути. –

Невозможно определить его с помощью CSS? –

No..CSS не может «обнаружить» что-либо. Вы можете попробовать «transform-origin: 50% 50%», но это не обязательно поддерживается кросс-браузером, как я помню, и, возможно, это не то, что вы на самом деле после. Здесь может быть использована демо. –

Вы пытались использовать transform-origin в своем CSS?

transform-origin: 50% 50%;

Это начало любого преобразования с середины селектора.

источник

2016-12-19 15:05:07 Stewartside

На самом деле значение 'transform-origin' по умолчанию уже равно' 50% 50% 0', в соответствии с [MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform- происхождения). – MateBoy

Но значение '50% 50%' отличается между браузерами. Поскольку спецификация изменилась, Chrome теперь делает «неправильную» вещь. На данный момент безопаснее использовать абсолютные координаты. То есть. 'transfer-origin: 100px 100px'. –

Подтверждено НЕ повторять Не работает в chrome 64 и Firefox 58. Это работает для элементов DOM, но НЕ для элементов SVG. Это работает в более старой версии также для элементов SVG. –

Вы можете избежать использования transform-origin и связанных с ним проблем браузера с помощью вложенных преобразований.

Основная идея состоит в том, чтобы преобразовать центр вращения для пути в начало координат (вверху слева) SVG, сделать поворот и преобразовать его обратно в исходное положение. Вы можете добиться этого с помощью вложенных групп.

Центр вашей формы короны прибл. (22, 432). Таким образом, мы можем сделать:

<g transform="translate(22 432)"> // translate everything to the path's original position 
    <g transform="rotate(90deg)">  // rotate (around the origin) 
    <path transform="translate(-22 -432)"/> // shift path to the origin 
    </g> 
</g>

Прочитайте трансформации изнутри (путь) во внешнюю группу.

Демо ниже:

#GOL 
 
{ 
 
    fill: red; 
 
    transform: rotate(90deg); 
 
} 
 

 
#GOL 
 
{ 
 
    transition-property: all; 
 
    transition-duration: 2s; 
 
}

<svg width="500" height="500"> 
 

 
    <g transform="translate(22 432)"> 
 
    <g id="GOL"> 
 
     <path class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 
 
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z 
 
    M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z" 
 
     transform="translate(-22 -432)"></path> 
 
    </g> 
 
    </g> 
 
</svg>

источник

2016-12-19 16:44:18

Вращающегося путь SVG с помощью CSS3 вокруг своего центра

ответ

Смежные вопросы