所以我在左边的第一个圆圈上有两个类（firstCircle＆amp; spin），我试图让它在原地旋转。（从css中移除它们以便你可以看到圆圈）我得到了对变换原点感到困惑：我的代码有什么问题。它是旋转的方式而不是旋转。我添加了一个宽度和高度，尝试了变换原点，它只是让它消失。
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 1120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
transform-origin: center center;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }
.container { padding:auto;
width: auto;
height: auto;
text-align:center; }
.line1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.13s;
}
.line2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 2.5s;
}
.line3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3s;
}
.line4 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.4s;
}
.line5 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 10s linear forwards;
animation-delay: 3.9s;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.insidefirstCircle {
stroke-dasharray: 1000;
stroke-dashoffset: 100;
animation: insideCircle 10s linear forwards;
animation-delay: 1.2s;
}
@keyframes insideCircle {
from {
stroke-dashoffset: 1000;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.secondCircle {
animation: secondCircle 2s linear forwards;
animation-delay: 2.2s;
}
@keyframes secondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.insidesecondCircle {
animation: insidesecondCircle 2s linear forwards;
animation-delay: 2.2s;
}
@keyframes insidesecondCircle {
from {
stroke-dashoffset: 1000;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<svg>
<path class="firstCircle spin"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
id="path7158"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<path class="insidefirstCircle"
transform="matrix(-0.22033261,-0.9754248,-0.97735568,0.21160309,0,0)"
d="m -102.55362,-32.142649 a 7.185163,7.442451 0 0 1 5.829705,7.489633 7.185163,7.442451 0 0 1 -6.173275,7.188196 7.185163,7.442451 0 0 1 -7.86062,-5.124812"
id="path7160"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35700712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<ellipse class="secondCircle"
ry="5.8064542"
rx="5.806459"
transform="rotate(-9.0228844)"
cy="102.10918"
cx="31.181959"
id="path7162"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.38561434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle class="insidesecondCircle"
r="2.081239"
style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.138;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7192"
cx="46.80978"
cy="95.955421" />
<circle class="line1"
r="8.1839027"
cy="124.84148"
cx="88.252518"
id="path7166"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.63219434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
<circle
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:3.454;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7168"
cx="88.252518"
cy="124.84148"
r="4.5812778" />
<circle
r="6.7396846"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.52063066;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="circle7174"
cx="128.74611"
cy="90.168755" />
<path
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="path7186"
d="m -180.38976,-169.87182 a 20.505369,19.487934 0 0 1 27.64196,8.28339 20.505369,19.487934 0 0 1 -8.68637,26.27924 20.505369,19.487934 0 0 1 -27.66048,-8.22736 20.505369,19.487934 0 0 1 8.62739,-26.29677"
transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" />
<ellipse
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
id="ellipse7190"
cx="152.20651"
cy="155.0309"
transform="matrix(0.98886074,-0.14884364,0.16522023,0.9862567,0,0)"
rx="5.5144606"
ry="5.2409396" />
<circle
cy="90.168755"
cx="128.74611"
id="circle7196"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.13800001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
r="2.081239" />
<path class="line1"
id="path875"
d="m 19.085467,74.174836 c 22.366283,17.178223 22.335724,17.75844 22.335724,17.75844"
style="fill:none;stroke:#4fae7d;stroke-width:0.28233331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line2"
style="fill:none;stroke:#4fae7d;stroke-width:0.36648375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 51.183439,99.59881 c 29.032633,22.29825 28.992966,23.0514 28.992966,23.0514"
id="path885" />
<path class="line3"
id="path879"
d="M 95.534634,121.46865 C 123.9702,95.423153 123.73736,94.872744 123.73736,94.872744"
style="fill:none;stroke:#4fae7d;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line4"
id="path881"
d="m 134.621,93.468564 c 37.14699,33.672096 37.14699,33.672096 37.14699,33.672096"
style="fill:none;stroke:#4fae7d;stroke-width:0.26971px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="line5"
id="path883"
d="m 181.40295,129.52127 c 31.40453,-10.83262 31.9066,-11.93052 31.9066,-11.93052"
style="fill:none;stroke:#4fae7d;stroke-width:0.37912115px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>
</div>
</body>
</html>
答案 0 :(得分：1)
首先，您.spin和firstCircle定义中的大多数CSS属性都无效。 position，top，'left和margin都是仅限HTML的属性。 width和height对<path>元素无效。
重要的是要记住，SVG与HTML完全不同，标识不同。
其次，您的路径已经有transform。 CSS变换不会添加，因此动画中的任何transform都会覆盖<path>上的变换。
解决该问题的最简单方法是（a）让你的SVG编辑器将变换乘以路径坐标;或者（b）通过在路径周围使用嵌套的组<g>元素来解决它。其中一个变换应用于该变换，另一个变换应用于路径。
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="..." />
</g>
<强>变换原点
现在这些问题得到了解决，我们可以处理轮换中心问题。
浏览器与transform-origin的兼容性存在问题。 Chrome有一个与规范相关的实现已过时。这是在修复的过程中，但目前，解决方法是始终使用绝对坐标而不是百分比值。
您圈子的中心位于(-19.5, -91.7)，因此要使用的正确transform-origin为：
transform-origin: -19.5px -91.7px;
因此，如果我们将其插入一个工作示例：
.spin {
transform-origin: -19.5px -91.7px;
animation:spin 4s linear infinite;
}
@keyframes spin {
100% { transform:rotate(360deg); }
}<svg>
<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)">
<path class="firstCircle spin"
d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512"
style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
</g>
</svg>