1

Когда я анимирую class="lp slimmer" и вращаю его, он переходит в верхний левый угол, я не могу понять, почему он не центрируется. Я думал transform-origin: center; выполнит свою работу, но это не работает.

Любая помощь высоко ценится.

#Component_6_2{
  -webkit-transform-origin: center center;
  animation:spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center  !important;

}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
<div class="lp slimmer" >

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="592.296" height="521.557" viewBox="0 0 592.296 521.557">
          <defs>
            <linearGradient id="linear-gradient" x1="0.071" y1="0.758" x2="0.904" y2="0.257" gradientUnits="objectBoundingBox">
              <stop offset="0"/>
              <stop offset="1" stop-color="#444"/>
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="0.071" y1="0.758" x2="0.904" y2="0.257" xlink:href="#linear-gradient"/>
          </defs>
          <g id="Group_4" data-name="Group 4" transform="translate(-39.754 -48.233)">
            <g id="Component_6_2" data-name="Component 6 – 2" transform="translate(111.476 48.233)">
              <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="260.287" cy="260.778" rx="260.287" ry="260.778" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_2" data-name="Ellipse 2" cx="231.923" cy="231.924" rx="231.923" ry="231.924" transform="translate(31.036 31.748)" fill="url(#linear-gradient-2)"/>
              <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="189.325" cy="189.325" rx="189.325" ry="189.325" transform="translate(68.902 69.613)" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_4" data-name="Ellipse 4" cx="115.962" cy="115.962" rx="115.962" ry="115.962" transform="translate(144.632 145.345)" fill="#7f23fa"/>
              <text id="Wordt_je_slimmer_van_muziek_" data-name="Wordt je slimmer
        van muziek?" transform="translate(253.524 266.767)" fill="#fff" font-size="19" font-family="ProductSans-Bold, Product Sans" font-weight="700"><tspan x="-74.109" y="0">Wordt je slimmer</tspan><tspan x="-54.036" y="23">van muziek?</tspan></text>
            </g>
          </g>
        </svg>

Свободный перевод вопроса svg elipses going to top left cornor when transform rotate от участника @J.vee.

1

1 ответ 1

2

Вы переопределяете встроенный translation, примененный к элементу в SVG.
Вы можете подумать о дополнительном g, чтобы избежать этого:

#Component_6_2_1{
  -webkit-transform-origin: center center;
  animation:spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;

}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
<div class="lp slimmer" >

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="592.296" height="521.557" viewBox="0 0 592.296 521.557">
          <defs>
            <linearGradient id="linear-gradient" x1="0.071" y1="0.758" x2="0.904" y2="0.257" gradientUnits="objectBoundingBox">
              <stop offset="0"/>
              <stop offset="1" stop-color="#444"/>
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="0.071" y1="0.758" x2="0.904" y2="0.257" xlink:href="#linear-gradient"/>
          </defs>
          <g id="Group_4" data-name="Group 4" transform="translate(-39.754 -48.233)">
          <g id="Component_6_2_1">
            <g id="Component_6_2" data-name="Component 6 – 2" transform="translate(111.476 48.233)">
              <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="260.287" cy="260.778" rx="260.287" ry="260.778" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_2" data-name="Ellipse 2" cx="231.923" cy="231.924" rx="231.923" ry="231.924" transform="translate(31.036 31.748)" fill="url(#linear-gradient-2)"/>
              <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="189.325" cy="189.325" rx="189.325" ry="189.325" transform="translate(68.902 69.613)" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_4" data-name="Ellipse 4" cx="115.962" cy="115.962" rx="115.962" ry="115.962" transform="translate(144.632 145.345)" fill="#7f23fa"/>
              <text id="Wordt_je_slimmer_van_muziek_" data-name="Wordt je slimmer
        van muziek?" transform="translate(253.524 266.767)" fill="#fff" font-size="19" font-family="ProductSans-Bold, Product Sans" font-weight="700"><tspan x="-74.109" y="0">Wordt je slimmer</tspan><tspan x="-54.036" y="23">van muziek?</tspan></text>
            </g>
          </g>
          </g>
        </svg>
    </a>
    </div>

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.