Question 49362 in Photoshop Question posted in
The official user guide can be found here.

How to fill the difficult shape icon inside with color? – Photoshop

Have an icon

Question is: how to fill that with an color inside?

There it in svg ↓

<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1004 0C17.7169 0 15.4856 1.07339 14 2.87184C12.5144 1.07333 10.2832 0 7.89957 0C3.54375 0 0 3.52462 0 7.85705C0 11.2495 2.03385 15.1734 6.04492 19.5198C9.13175 22.8646 12.4897 25.4544 13.4454 26.1685L13.9998 26.5828L14.5543 26.1686C15.5099 25.4545 18.868 22.8647 21.9549 19.52C25.9661 15.1736 28 11.2496 28 7.85705C28 3.52462 24.4562 0 20.1004 0ZM20.5948 18.2782C18.0558 21.0293 15.3242 23.2533 13.9998 24.2783C12.6755 23.2533 9.944 21.0293 7.40498 18.2781C3.76837 14.3375 1.84615 10.734 1.84615 7.85705C1.84615 4.53717 4.56172 1.83622 7.89957 1.83622C10.0961 1.83622 12.1243 3.02694 13.1927 4.94377L14 6.3923L14.8073 4.94377C15.8756 3.027 17.9038 1.83622 20.1004 1.83622C23.4383 1.83622 26.1538 4.53711 26.1538 7.85705C26.1538 10.7341 24.2316 14.3377 20.5948 18.2782Z" fill="black"/>
</svg>

What i want to do its a when user hover on the icon, it must fill with the some color.

before:(without :hover) before
after:(with hover on it) after

Does anyone know how to do it if i have only one piece of icon?

The only way that I managed it, is to fill the icon in photoshop (cause the filling with background shape won’t work with that kind of shapes).

Then i just put it like an img, positioned it with absolute to match the icon under, and use opacity on hover with transition on it.

Don’t know how to show it there by code, if i can’t put the icon file here.

code

Just is there any easyer way to do that?

Tags:

2

Answers


  1. 0

    Try This:
    you need to remove the border of your shap:

    .heart{
  clip-path: path("M20.1,0c-2.4,0-4.6,1.1-6.1,2.9C12.5,1.1,10.3,0,7.9,0C3.5,0,0,3.5,0,7.9c0,3.4,2,7.3,6,11.7c3.1,3.3,6.4,5.9,7.4,6.6l0.6,0.4l0.6-0.4c1-0.7,4.3-3.3,7.4-6.6c4-4.3,6-8.3,6-11.7C28,3.5,24.5,0,20.1,0z");
  width:150px;
  height:150px;
  background-color:black;
}
.heart:hover{
  background-color:red;
}
    <div class="heart">

</div>
    Login or Signup to reply.
  2. 0

    Easiest way I can think of is to change your svg.
    For now, it looks like your svg is made from a stroke that has been converted to a shape.

    Instead of doing that, you could have a plain shape and apply the stroke in CSS.

    When you hover the svg:

    • fill color is yellow
    • stroke color is yellow

    When you don’t:

    • fill color is transparent
    • stroke color is black
    svg {
  stroke: black;
  stroke-width: 2px;
  fill: transparent;
  transition: all .3s ease-in;
}

svg:hover {
  stroke: red;
  fill: red;
}
    <svg width="28" height="27" viewBox="0 0 28 27"  xmlns="http://www.w3.org/2000/svg">
<path d="M 20.595 18.278 C 18.056 21.029 15.324 23.253 14 24.278 C 12.676 23.253 9.944 21.029 7.405 18.278 C 3.768 14.338 1.846 10.734 1.846 7.857 C 1.846 4.537 4.562 1.836 7.9 1.836 C 10.096 1.836 12.124 3.027 13.193 4.944 L 14 6.392 L 14.807 4.944 C 15.876 3.027 17.904 1.836 20.1 1.836 C 23.438 1.836 26.154 4.537 26.154 7.857 C 26.154 10.734 24.232 14.338 20.595 18.278 Z" ></path>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search