如何实现按钮聚焦时修改img标签内SVG的颜色？

我在<a>标签（用作按钮）里嵌入了SVG，希望当这个按钮处于focus状态时，SVG的颜色能改变。之前尝试修改SVG内部颜色，但只有聚焦在SVG本身时才生效，聚焦按钮的时候没反应。想问问有没有可行的实现方法？

我的HTML代码： #

<a *ngIf="fieldTextTypeRegister" target="_blank" href="https://twitter.com/intent/tweet?text={{conteudoCompartilhar}}" type="button" class="btn btn-outline float-right teste">
  <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 class="filter-green" src="assets/images/icons/face.svg" alt="">
</a>

我尝试过的CSS代码： #

.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;
}

解决方案： #

核心是利用CSS后代选择器，针对按钮的:focus状态来控制内部SVG的样式，不需要让SVG本身获得焦点。

1. 处理内嵌的SVG：
   直接通过按钮的:focus状态选择内部的svg path，修改其fill属性即可，覆盖SVG内部的fill值：

   .teste:focus svg path {
     fill: #fff; /* 替换成你需要的颜色 */
   }
   

2. 处理<img>标签引入的外部SVG：
   外部SVG无法直接修改内部元素样式，所以用CSS filter来实现颜色变化，同样在按钮focus时触发：

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

把这两段CSS替换你原来的代码，就能实现按钮聚焦时，内部两个SVG（内嵌和外部引入）都变色的效果。

内容的提问来源于stack exchange，提问作者Leonardo Lima