在 SVG hover stroke-width 中添加缓入和缓出答案

【问题标题】：Adding ease-in and ease out in SVG hover stroke-width在 SVG hover stroke-width 中添加缓入和缓出
【发布时间】：2016-07-15 16:25:57
【问题描述】：

我想在 svg 地图中添加缓进出悬停效果。我正在通过路径的笔划宽度创建悬停。这可能吗？欢迎任何其他在 svg 地图中使用缓动创建此类悬停的建议。谢谢！

Link to Codepen

<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xlink">
<meta charset="UTF-8">
<title>SVG Hover</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200  200">
<g id="layer1" transform="translate(-277.14 -332.36)">
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
    <circle id="path4138" cx="380" cy="430" r="15"
        onmouseover="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 50; this.style['stroke-opacity'] = 0.7;"
        onmouseout="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 0;"/>
</g>
</body>
</html>

【问题讨论】：

标签： svg hover onmouseover onmouseout

【解决方案1】：

我不知道如何用 JavaScript 做到这一点，但我能够用 CSS 做到这一点。编辑：我知道，但 CSS 看起来更干净。

JSfiddle

这是我的代码：

<body>
  <svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200  200">
  <g id="layer1" transform="translate(-277.14 -332.36)">
    <rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
    <circle id="path4138" cx="380" cy="430" r="15"
        />
  </g>

还有 CSS：

 #path4138 {
    transition: stroke-width 0.3s ease-in;
    stroke: #3f27dd;
    stroke-width: 0;
    stroke-opacity: 0.7;
    fill: pink;
    pointer-events:all;
  }

  #path4138:hover {
    stroke-width: 50;
    fill: red;
    transition: stroke-width 0.3s ease-out;
  }

【讨论】：