SVG矩形描边动画animation-play-state无法通过JavaScript修改排查

核心问题1：DOM元素获取错误 #

document.getElementsByClassName()返回的是HTMLCollection（元素集合），不是单个DOM元素，直接调用.style会导致操作无效（可打开浏览器控制台查看报错）。必须通过索引获取具体元素，比如[0]选中第一个匹配的元素。

核心问题2：CSS动画声明错误 #

你的CSS里animation-name: hoverbutton01 1s;写法违规，animation-name仅负责指定动画名称，时长需用animation-duration单独设置，或用animation简写语法整合所有动画属性。

核心问题3：初始动画状态未设置 #

要实现悬停才触发动画，初始状态必须把animation-play-state设为paused，否则页面加载时动画会自动执行一次。

修改后的完整代码 #

CSS部分（修正动画声明）

/* 其他CSS保持不变，仅修改button_01svgrect_stroke的动画相关代码 */
rect.button_01svgrect_stroke {
  fill: transparent;
  width: 120px;
  height: 40px;
  stroke-width: 1;
  stroke: rgba(213, 198, 255, 0);
  stroke-dasharray: 10 132 20 132;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  /* 修正动画写法：用animation简写整合属性，初始状态设为暂停 */
  animation: hoverbutton01 1s linear paused;
  -webkit-animation: hoverbutton01 1s linear paused;
}

/* 动画关键帧代码保持不变 */
@keyframes hoverbutton01 {
  10% {
    stroke: rgb(213, 198, 255);
    stroke-dasharray: 10 132 20 132;
    stroke-dashoffset: 0;
  }
  60% {
    stroke: rgb(213, 198, 255);
    stroke-dasharray: 80 80 80 80;
    stroke-dashoffset: -40;
  }
  70% {
    stroke: rgb(213, 198, 255);
    stroke-dasharray: 80 80 80 80;
    stroke-dashoffset: -60;
  }
  to {
    stroke: rgba(76, 255, 231, 0);
    stroke-dasharray: 80 80 80 80;
    stroke-dashoffset: -140;
  }
}

JavaScript部分（修正元素获取逻辑）

function buttonhover() {
  // 获取集合中的第一个目标元素
  const strokeEl = document.getElementsByClassName("button_01svgrect_stroke")[0];
  strokeEl.style.animationPlayState = "running";
  // 兼容webkit内核浏览器
  strokeEl.style.webkitAnimationPlayState = "running";
}

function buttonnohover() {
  const strokeEl = document.getElementsByClassName("button_01svgrect_stroke")[0];
  strokeEl.style.animationPlayState = "paused";
  strokeEl.style.webkitAnimationPlayState = "paused";
}

额外优化建议 #

完全可以不用JavaScript，纯CSS就能实现悬停动画，代码更简洁易维护：

/* 移除HTML中的onmouseover/onmouseleave事件，添加CSS hover状态 */
.button_01tag:hover .button_01svgrect_stroke {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

直接通过CSS的:hover伪类控制动画播放状态，兼容性和可维护性更强。

内容的提问来源于stack exchange，提问作者Shrey Sharma