以秒为单位将 SVG 路径动画化为更小的尺寸（如点）

【问题标题】：Animate SVG path to smaller size ( like a dot ) in number of seconds以秒为单位将 SVG 路径动画化为更小的尺寸（如点）
【发布时间】：2019-12-19 01:25:36
【问题描述】：

我正在尝试以秒为单位将以下 SVG 从当前尺寸变为更小的尺寸（如点）。

    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
       <style type="text/css">
    	   .st3{fill:#E8D99C;stroke:#0C3854;stroke-miterlimit:10;}
       </style>
       <path 
           class="st3" 
           d="M220.8,724.8l-12.6,13.1c-2,2-5.1,2-7.1,0l-12.6-13.1c-2-2-2-5.4,0-7.4l12.6-13.1c2-2,5.1-2,7.1,0l12.6,13.1
    	C222.8,719.4,222.8,722.8,220.8,724.8z"
       />
    </svg>

如何使用 JavaScript 或 CSS 实现这一点？

【问题讨论】：

标签： javascript css svg svg-animate

【解决方案1】：

我会为此使用 CSS 过渡：transition:transform, .5s。主要思想是围绕它自己的中心变换形状：transform-origin: center center; transform-box: fill-box;

svg{border:1px solid}
.st3{transform: scale(1, 1);
transform-origin: center center;
transform-box: fill-box;
transition:transform, .5s}
svg:hover path{ transform: scale(.1, .1);}

<svg viewBox="186 702 37 38" width="300">
   <style type="text/css">
       .st3{fill:#E8D99C;stroke:#0C3854;stroke-miterlimit:10;}
   </style>
   <path
       class="st3" 
       d="M220.8,724.8l-12.6,13.1c-2,2-5.1,2-7.1,0l-12.6-13.1c-2-2-2-5.4,0-7.4l12.6-13.1c2-2,5.1-2,7.1,0l12.6,13.1
    C222.8,719.4,222.8,722.8,220.8,724.8z"
   />
</svg>

作为观察：您的 svg 元素没有 viewBox 属性，使形状落在 svg 画布之外。我添加了一个 viewBox 和一个 width 属性，以便能够看到形状。

【讨论】：