将填充应用于 svg 时,路径消失

在 svg 悬停时,我想应用一些 css,但内部路径消失了。如果我使用 rgba 颜色,则内部路径可见,但我想使用 rgb。在附加的代码中,您可以看到这两种变体。有没有办法纠正这个问题?

svg:hover path {
  fill: blue;
  /*fill: rgba(42,100,177,0.436);*/
}
svg:hover > path {
  stroke: red;
}
<svg 
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
  <path
    d="M8.44019 12L10.8142 14.373L15.5602 9.62695"
    stroke="#130F26"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M2.74976 12C2.74976 18.937 5.06276 21.25 11.9998 21.25C18.9368 21.25 21.2498 18.937 21.2498 12C21.2498 5.063 18.9368 2.75 11.9998 2.75C5.06276 2.75 2.74976 5.063 2.74976 12Z"
    fill-rule="evenodd"
    clip-rule="evenodd"
    stroke="#130F26"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

ABCwoaidianlusheji 回答:将填充应用于 svg 时,路径消失

在圆角正方形之后有复选标记路径使其“上方”。所以这可能是一个快速解决方案。

svg:hover path {
  fill: blue;
  /*fill: rgba(42,100,177,0.436);*/
}
svg:hover > path {
  stroke: red;
}
<svg 
    width="24px"
    height="24px"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
  <path
    d="M2.74976 12C2.74976 18.937 5.06276 21.25 11.9998 21.25C18.9368 21.25 21.2498 18.937 21.2498 12C21.2498 5.063 18.9368 2.75 11.9998 2.75C5.06276 2.75 2.74976 5.063 2.74976 12Z"
    fill-rule="evenodd"
    clip-rule="evenodd"
    stroke="#130F26"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
  <path
    d="M8.44019 12L10.8142 14.373L15.5602 9.62695"
    stroke="#130F26"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

本文链接:https://www.f2er.com/3882.html

大家都在问