CODEWITHSUNDEEP
csssvg
Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

When apply fill to svg, path disappear

On svg hover I want to apply some css, but inner path disappear. If I use rgba color than inner path is visible, but i would like to use rgb. In code attached You can see both variants. Is there a way to correct this?

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>

Upvotes: 1

Views: 582

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

Having the checkmark path after the rounded square is making it "above". So that maybe a quick fix.

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>

Upvotes: 2

Related Questions