SVG 圆圈和线条过渡不起作用

Question

我正在尝试实现一个基于 SVG 图标的简单切换。但是，我无法让 transition 在圆圈或直线上工作，尽管对父级来说是这样。我认为将 circle 和 line 添加到 transition 可能是多余的，但我还是做了，只是为了确定。

svg, circle, line {
  transition: all 0.2s ease-in-out;
}

svg:hover {
  transform: rotate(45deg);
}

svg:hover circle {
  fill: #d5f0e5;
  stroke: #00884e;
}

svg:hover line {
  stroke: #00884e;
}

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="9.5" stroke="#515663"/>
<line x1="10.0555" y1="5" x2="10.0555" y2="15" stroke="#2A303E"/>
<line x1="5" y1="9.94434" x2="15" y2="9.94434" stroke="#2A303E"/>
</svg>

Answer 1

描边颜色过渡确实有效，但是 .2s 确实很快，也许这就是您认为它不起作用的原因？
但是，你不能从none过渡到非none，如果你想让插值起作用，你需要将它设置为transparent：

svg, circle, line {
  transition: all 2s ease-in-out; /* set to 2s to clearly show if it works */
}

svg:hover {
  transform: rotate(45deg);
}

svg:hover circle {
  fill: #d5f0e5;
  stroke: #00884e;
}

svg:hover line {
  stroke: #00884e;
}

<!-- changed the 'fill' attribute from "none" to "transparent" to allow transitionning -->
<svg width="20" height="20" viewBox="0 0 20 20" fill="transparent" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="9.5" stroke="#515663"/>
  <line x1="10.0555" y1="5" x2="10.0555" y2="15" stroke="#2A303E"/>
  <line x1="5" y1="9.94434" x2="15" y2="9.94434" stroke="#2A303E"/>
</svg>

或者如以下评论所述，您也可以使用 fill-opacity 属性来获得相同的效果并且可能获得更好的浏览器支持。

SVG 圆圈和线条过渡不起作用

SVG circle and line transition not working

html

css

svg

transition