如何通过 CSS 使 SVG 元素具有动画效果
How to make SVG elements animate via CSS
我有一个包含点的 svg。我试图让这些点跳动。请参阅下面的示例，了解我要达到的效果：
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px;
height: 20px;
width: 20px;
transform: scale(1);
animation: pulse-black 2s infinite;
}
@keyframes pulse-black {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
<div class="blobs-container">
<div class="blob"></div>
</div>
现在，我遇到的问题是 path 是我的 svg 中的点，transform 属性 已经被内联用于定位svg 中的点。因此，我不能使用 transform:scale(); 来使我的元素脉动。请参阅下面的演示：
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* path.pink-dot{
transform: scale(1);
animation: pulse 2s infinite;
} */
<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)" fill="#f277c6" />
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>
如果您取消注释 path.pink-dot css，您将看到圆点消失（因为内联定位转换 属性 正在被覆盖）。
如果不只使用 transform 和 CSS，我想不出另一种方法来实现我所追求的目标。我看到的唯一其他选择是将其创建为 Lottie animation.
我想要的是仅使用 CSS 吗？
最简单的方法是引入父元素并将变换移动到那里。我还设置了 transform-origin 和 transform-box，因此圆圈围绕其中心缩放，并且我增加了缩放比例，因此发生的事情更加明显。
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
path.pink-dot{
transform: scale(1);
transform-origin: center;
transform-box: fill-box;
animation: pulse 2s infinite;
}
<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<g transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)">
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" fill="#f277c6" />
</g>
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>
我有一个包含点的 svg。我试图让这些点跳动。请参阅下面的示例，了解我要达到的效果：
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px;
height: 20px;
width: 20px;
transform: scale(1);
animation: pulse-black 2s infinite;
}
@keyframes pulse-black {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
<div class="blobs-container">
<div class="blob"></div>
</div>
现在，我遇到的问题是 path 是我的 svg 中的点，transform 属性 已经被内联用于定位svg 中的点。因此，我不能使用 transform:scale(); 来使我的元素脉动。请参阅下面的演示：
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* path.pink-dot{
transform: scale(1);
animation: pulse 2s infinite;
} */
<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)" fill="#f277c6" />
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>
如果您取消注释 path.pink-dot css，您将看到圆点消失（因为内联定位转换 属性 正在被覆盖）。
如果不只使用 transform 和 CSS，我想不出另一种方法来实现我所追求的目标。我看到的唯一其他选择是将其创建为 Lottie animation.
我想要的是仅使用 CSS 吗？
最简单的方法是引入父元素并将变换移动到那里。我还设置了 transform-origin 和 transform-box，因此圆圈围绕其中心缩放，并且我增加了缩放比例，因此发生的事情更加明显。
.container {
position: relative;
background-color: #5D209F;
min-height: 600px;
}
.pattern {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
svg {
width: 100%;
}
@keyframes pulse {
0% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.55);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
path.pink-dot{
transform: scale(1);
transform-origin: center;
transform-box: fill-box;
animation: pulse 2s infinite;
}
<div class="container">
<div class="pattern">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1366" height="601" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" width="1366" height="601" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke-width="1" />
</clipPath>
</defs>
<g id="Mask_Group_44" data-name="Mask Group 44" transform="translate(0 -218)" clip-path="url(#clip-path)">
<g id="Group_136" data-name="Group 136" transform="translate(-136.59 502.75) rotate(-13)">
<path id="Path_110717" data-name="Path 110717" d="M-.045,317.667c52.99,25.37,193.088,19.238,227.809-67.069s3.3-168.446-47.026-176.576-76.608,41.118-59.668,80.961c12.584,29.6,59.277,70.684,146.016,102.548,204.048,67.077,294.63-90.155,380.431-92.977s131.65,55.238,218.878,43.65S979.987,34.33,1073.116,32.315,1248.2,149.145,1342.2,159.8s128.891-102.009,156.417-98.448" transform="translate(30.239 1.27)" fill="none" stroke="rgba(249,247,250,0.3)" stroke-width="12" />
<path id="Path_110685" data-name="Path 110685" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 879.239, 181.832)" fill="#5f249f" />
<path id="Path_110686" data-name="Path 110686" d="M28.516,0C44.309.044,57.146,12.549,57.19,27.93S44.467,55.746,28.674,55.7.044,43.154,0,27.772,12.723-.044,28.516,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1328.26, 136.406)" fill="#5f249f" />
<g transform="matrix(0.995, -0.105, 0.105, 0.995, 890.741, 189.504)">
<path class="pink-dot" id="Path_110684" data-name="Path 110684" d="M18.325,0C28.4-.047,36.525,8.442,36.477,18.963S28.226,38.05,18.153,38.1-.047,29.655,0,19.135,8.252.048,18.325,0Z" fill="#f277c6" />
</g>
<path id="Path_110683" data-name="Path 110683" d="M19.518,0A19.454,19.454,0,0,1,39.145,19.118,19.193,19.193,0,0,1,19.627,38.127,19.454,19.454,0,0,1,0,19.009,19.193,19.193,0,0,1,19.518,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1338.152, 144.203)" fill="#ffee7e" />
</g>
</g>
</svg>
</div>
</div>