【发布时间】：2021-07-11 11:06:16
【问题描述】：
当我为 lp 设置动画并将其旋转到左上角时，我无法弄清楚为什么它不会居中。我认为变换原点：中心；会做这项工作，但它不工作。
非常感谢任何帮助，
提前致谢。
#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>
</a>
</div>【问题讨论】：
标签： html css animation svg transform