如何通过 CSS 使 SVG 元素动画化
Posted
技术标签:
【中文标题】如何通过 CSS 使 SVG 元素动画化【英文标题】：How to make SVG elements animate via CSS 【发布时间】：2022-01-05 06:11:07 【问题描述】：我有一个包含点的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" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke- />
</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- />
<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 吗？
【问题讨论】：
【参考方案1】：最简单的方法是引入一个父元素并将变换移动到那里。我还设置了 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" viewBox="0 0 1366 601">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1325" data-name="Rectangle 1325" transform="translate(0 218)" fill="#fff" stroke="#707070" stroke- />
</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- />
<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>【讨论】：
以上是关于如何通过 CSS 使 SVG 元素动画化的主要内容，如果未能解决你的问题，请参考以下文章