How to change svg color inside img tag-CodePudding

guys I have an svg inside the img tag, I would like that when my button was with "focus" the svg color would change

<a  *ngIf="fieldTextTypeRegister" target="_blank" href="https://twitter.com/intent/tweet?text={{conteudoCompartilhar}}" type="button" type="button"   >
                <svg  width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path  d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="#495057"/>
                  </svg>
                  <img  src="assets/images/icons/face.svg" alt="">
               </a>

I studied a little about it and from what I understand I wouldn't be able to do what I want, does anyone know if it's possible?

if I try to change the color inside the svg it works, but then the focus has to be on the svg, not on my button

in short I would like to change the color of the svg when the focus is on my button

.filter-green path:focus{
filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(36deg) brightness(107%) 
contrast(101%);

}


.someclassname{
fill: #fff;
}

svg:hover {
fill: #fff;
}

path:hover{
fill: #fff;
}

CodePudding user response：

Should set the focus (or hover) on the button and the affected element as a child of it. Also it seems that !important is necessary here.

.btn:hover svg path {
  fill: #ff0000 !important;
  transform: scale(2);
}

<a *ngIf="fieldTextTypeRegister" target="_blank" href="https://twitter.com/intent/tweet?text={{conteudoCompartilhar}}" type="button" type="button" >
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path  d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="#495057"/>
                  </svg>
  <img  src="assets/images/icons/face.svg" alt="">
</a>