HTML SVG 怎么使用动画标签实现流畅的矢量图形过渡-H5教程-PHP中文网

现代浏览器已弃用smil动画，推荐用css transition、@keyframes和stroke-dasharray/dashoffset实现svg流畅过渡，需内联svg、统一颜色格式、避免内联style，并用js获取路径长度。

html svg 怎么使用动画标签实现流畅的矢量图形过渡

SVG 本身不支持 <animate></animate> 标签的现代浏览器原生流畅过渡——SMIL 动画（包括 <animate></animate>、<set></set>、<animatetransform></animatetransform> 等）在 Chrome 100+、Firefox 110+ 和 Safari 16+ 中已被逐步弃用或完全移除。当前实现“流畅矢量图形过渡”的可靠路径，是放弃 SMIL，转向 CSS + 原生 SVG 属性控制。

✅ 用 CSS transition 实现基础颜色与状态过渡

适用于 hover、click、class 切换等交互场景，响应快、代码轻、性能好。

fill、stroke、opacity、transform（如 scale、translate）等属性天然支持 CSS 过渡
颜色值必须格式统一：全用 #rrggbb、全用 rgb() 或全用 hsl()，否则浏览器无法插值
SVG 必须内联嵌入 HTML（即 <svg>...</svg>），不能用 <img src="icon.svg">，否则无法用 CSS 选中内部元素
避免内联 style（如 style="fill:red"），它会覆盖外部 CSS 的 transition 规则

示例：

<svg width="100" height="100" viewbox="0 0 100 100"><circle class="dot" cx="50" cy="50" r="20"></circle></svg><style>
.dot {
  fill: #3498db;
  transition: fill 0.35s cubic-bezier(0.33, 0.8, 0.5, 1), 
              transform 0.35s ease;
}
.dot:hover {
  fill: #e74c3c;
  transform: scale(1.2);
}
</style>

✅ 用 CSS @keyframes 实现多段/循环/时序精确的过渡

适合 Logo 微动效、加载动画、状态高亮等需要节奏控制的场景。

推荐用 hsl() 表示颜色：色相（hue）连续变化更自然，避免 RGB 跳变
可同时驱动多个属性（fill + stroke-width + opacity）
注意 forwards 保留在结束帧，避免动画回退

示例（呼吸式色相过渡）：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

@keyframes pulseHue {
  0% { fill: hsl(210, 100%, 60%); }
  50% { fill: hsl(30, 100%, 65%); }
  100% { fill: hsl(210, 100%, 60%); }
}

.pulsing {
  animation: pulseHue 2.4s ease-in-out infinite;
}

✅ 用 stroke-dasharray + stroke-dashoffset 实现“路径绘制”过渡

这是 SVG 路径最经典、兼容性最强的“出现式”过渡，视觉上像笔在画线。

必须通过 JS 获取真实路径长度：pathEl.getTotalLength()
在 DOM 加载完成后再执行（防止返回 0）
设置 stroke 和 fill="none"，否则描边不可见或被填充遮挡
CSS 动画只需控制 stroke-dashoffset，从全长减到 0

示例：

<svg viewbox="0 0 200 200"><path class="line" d="M20,20 Q100,50 180,20" stroke="#2ecc71" stroke-width="3" fill="none"></path></svg>

.line {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.8s ease-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

document.addEventListener('DOMContentLoaded', () => {
  const path = document.querySelector('.line');
  const len = path.getTotalLength();
  path.style.setProperty('--len', len);
});