我正尝试在围绕两个 圆圈 的 svg 中动画几个路径。我的目标是在中心缩放 路径，就好像它们在脉动一样。我查看了 stackoverflow 上的每个答案，以弄清楚如何实现这一目标。 The closest solution我发现没有炒锅。
这是一个jsfiddle我到目前为止所拥有的。如您所见，路径 正在向远/向原点扩展。如果无法通过 CSS 实现，是否可以通过 Velocity.js 等 javascript 框架实现？
这是 SVG:
<div class="wrapper">
<svg version="1.1" viewBox="20 20 60 60" >
<g class="icon-sun">
<path class="icon-sun-beam"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/>
<path class="icon-sun-beam"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/>
<path class="icon-sun-beam"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/>
<path class="icon-sun-beam"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/>
<path class="icon-sun-beam"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/>
<path class="icon-sun-beam"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/>
<circle class="icon-sun-outline"
cx="50.034"
cy="50"
r="11.999"/>
<circle class="icon-sun-fill"
fill="#FFFFFF"
cx="50.034"
cy="50"
r="7.999"/>
</g>
</svg>
</div>
这是 CSS:
.wrapper {
width: 100px;
text-align: center;
}
.icon-sun-beam {
animation-name: scale;
animation-duration: 3s;
animation-iteration-count: infinite;
transform-origin: 50px 50px;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: alternate;
}
.icon-sun-beam:nth-child(even) {
animation-delay: 4.5s, 4.5s;
}
.icon-sun {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 18s;
animation-timing-function: linear;
transform-origin: 50px 50px;
}
svg {
shape-rendering: geometricPrecision;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(0.85, 0.85);
}
100% {
transform: scale(1.35, 1.35);
}
}
最佳答案
有一个简单的解决方案，那就是跨浏览器。
只需为您的每个阳光赋予其绝对 transform-origin。
.wrapper {
width: 100px;
text-align: center;
}
.icon-sun-beam {
animation-name: scale;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: both;
animation-direction: alternate;
}
.icon-sun-beam:nth-child(even) {
animation-delay: 4.5s, 4.5s;
}
.icon-sun {
animation-name: rotate;
animation-iteration-count: infinite;
animation-duration: 18s;
animation-timing-function: linear;
transform-origin: 50px 50px;
}
svg {
shape-rendering: geometricPrecision;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scale {
0% {
transform: scale(0.85, 0.85);
}
100% {
transform: scale(1.35, 1.35);
}
}<div class="wrapper">
<svg version="1.1" viewBox="20 20 60 60" >
<g class="icon-sun">
<path class="icon-sun-beam" style="transform-origin: 70.0px 50.0px;"
d="M72.03,51.999
h-3.998
c-1.105,0-2-0.896-2-1.999
s0.895-2,2-2h3.998
c1.104,0,2,0.896,2,2
S73.136,51.999,72.03,51.999z"/>
<path class="icon-sun-beam" style="transform-origin: 64.2px 35.9px;"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"/>
<path class="icon-sun-beam" style="transform-origin: 50.0px 30.0px;"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"/>
<path class="icon-sun-beam" style="transform-origin: 35.9px 35.9px;"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"/>
<path class="icon-sun-beam" style="transform-origin: 30.0px 50.0px;"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"/>
<path class="icon-sun-beam" style="transform-origin: 35.9px 64.1px;"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"/>
<path class="icon-sun-beam" style="transform-origin: 50.0px 70.0px;"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"/>
<path class="icon-sun-beam" style="transform-origin: 64.2px 64.1px;"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"/>
<circle class="icon-sun-outline"
cx="50.034"
cy="50"
r="11.999"/>
<circle class="icon-sun-fill"
fill="#FFFFFF"
cx="50.034"
cy="50"
r="7.999"/>
</g>
</svg>
</div>关于javascript - 中心点的 Svg 缩放路径(脉动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41187285/