SVG边框连续变化的鼠标悬停动画按钮

SVG 边框可连续变化的鼠标滑过动画按钮挺有趣的，它能让你的网站按钮在鼠标悬停时产生连续变化的视觉效果，增加交互感。通过 SVG，你可以利用和等元素来绘制基本的按钮形状，边框动画则通过元素来完成，挺好玩的。而且，借助 CSS3 的transition属性，你可以快速调节动画的时长、效果等，效果蛮炫的。只要在 SVG 中调整stroke属性，设置动画参数就行。比如，在鼠标悬停时，边框的颜色可以从灰色变为红色，就像这样：

<svg width="100" height="50">
  <rect x="0" y="0" width="100" height="50" fill="#333">
    <animate attributeName="stroke" attributeType="XML" from="#ccc" to="#f00" dur="0.5s" fill="freeze" />
  rect>
svg>