Вращение элементов SVG вокруг их центра

У меня есть изображение SVG, в котором есть отдельные круги, которые я хочу повернуть вокруг своего собственного центра (центра кругов). Однако, когда я устанавливаю transform-origin:center, а затем применяю преобразование, он начинает вращаться вокруг центра всего изображения SVG. Есть ли способ установить исходную точку преобразования так, чтобы круги вращались вокруг своего центра?

Вот исходное изображение svg (я не могу вставить сюда исходный код): Изображение SVG

Вот jsfiddle для этого: https://jsfiddle.net/g9zfcdm3/3/

На изображении 4 круга. Достичь этого с помощью любого одного круга было бы достаточно. Чего я на самом деле хочу добиться, так это анимировать эти круги так, чтобы они бесконечно вращались вокруг своего собственного центра.

Просто упаковал это в jsfiddle, чтобы продемонстрировать проблему и позволить разработчикам поиграть и найти решение: jsfiddle.net/g9zfcdm3/3

— 17.03.2018 15:21

Большое спасибо. Я опубликую это в самом вопросе

— 17.03.2018 15:26

html css svg

17.03.2018 14:29

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

4 818

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

См. Этот (признанный недействительным) отчет об ошибке в Firefox о вашей проблеме: https://bugzilla.mozilla.org/show_bug.cgi?id=1209061

Обычно преобразования CSS для элементов SVG относятся к области просмотра, а не к самому элементу. Это можно изменить, добавив transform-box: fill-box:

svg .rotate {
  animation: rotate 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Рабочая рабочий пример: https://jsfiddle.net/g9zfcdm3/10/

Задний план

Из Документы MDN о transform-box:

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
border-box (default)
The border box is used as the reference box. The reference box of a is the border box of its table wrapper box, not its table box.
fill-box
The object bounding box is used as the reference box.

Обратите внимание, что это экспериментальная функция и, вероятно, не будет работать в IE и Edge.

Спасибо. Меня не очень беспокоят пользователи IE или Edge. Однако есть ли способ реализовать это в этих браузерах?

— 17.03.2018 15:36

Я так не думаю, поскольку они вообще не поддерживают transform-origin в SVG: developer.mozilla.org/en-US/docs/Web/CSS/…

— 17.03.2018 15:41

17.03.2018 15:32

Пример анимации прямо в файле SVG без CSS

<?xml version = "1.0" encoding = "iso-8859-1"?>
<svg version = "1.1" id = "Capa_1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px"
     viewBox = "0 0 512 512" style = "enable-background:new 0 0 512 512;" xml:space = "preserve">
     <g id = "sharp-group" transform = "translate(50, 50) rotate(0) scale(0.8, 0.8)">
<g>
    <g>
        <path fill = "#746DF7" d = "M493.815,70.629c-11.001-1.003-20.73,7.102-21.733,18.102l-2.65,29.069C424.473,47.194,346.429,0,256,0
            C158.719,0,72.988,55.522,30.43,138.854c-5.024,9.837-1.122,21.884,8.715,26.908c9.839,5.024,21.884,1.123,26.908-8.715
            C102.07,86.523,174.397,40,256,40c74.377,0,141.499,38.731,179.953,99.408l-28.517-20.367c-8.989-6.419-21.48-4.337-27.899,4.651
            c-6.419,8.989-4.337,21.479,4.651,27.899l86.475,61.761c12.674,9.035,30.155,0.764,31.541-14.459l9.711-106.53
            C512.919,81.362,504.815,71.632,493.815,70.629z"/>
    </g>
</g>
<g>
    <g>
        <path fill = "#746DF7" d = "M472.855,346.238c-9.838-5.023-21.884-1.122-26.908,8.715C409.93,425.477,337.603,472,256,472
            c-74.377,0-141.499-38.731-179.953-99.408l28.517,20.367c8.989,6.419,21.479,4.337,27.899-4.651
            c6.419-8.989,4.337-21.479-4.651-27.899l-86.475-61.761c-12.519-8.944-30.141-0.921-31.541,14.459l-9.711,106.53
            c-1.003,11,7.102,20.73,18.101,21.733c11.014,1.001,20.731-7.112,21.733-18.102l2.65-29.069C87.527,464.806,165.571,512,256,512
            c97.281,0,183.012-55.522,225.57-138.854C486.594,363.309,482.692,351.262,472.855,346.238z"/>
    </g>
</g>
 
</g>
           <animateTransform xlink:href = "#sharp-group" attributeType = "xml" attributeName = "transform" type = "rotate" from = "0 256 256" to = "360 256 256" dur = "2s" additive = "sum" repeatCount = "indefinite" />
</svg>

Вы можете изменить конфигурацию анимации на

 <animateTransform xlink:href = "#sharp-group" attributeType = "xml" attributeName = "transform" type = "rotate" from = "0 256 256" to = "360 256 256" dur = "2s" additive = "sum" repeatCount = "indefinite" />

Для справок: https://css-tricks.com/guide-svg-animations-smil/

21.12.2020 03:08