如何更改img標簽內的svg顏色

伙計們，我在 img 標簽中有一個 svg，我希望當我的按鈕帶有“焦點”時，svg 顏色會改變

<a  *ngIf="fieldTextTypeRegister" target="_blank" href="https://twitter.com/intent/tweet?text={{conteudoCompartilhar}}" type="button" 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>

我對此進行了一些研究，據我所知，我無法做我想做的事，有人知道這是否可能嗎？

如果我嘗試更改 svg 內的顏色，它可以作業，但是焦點必須在 svg 上，而不是在我的按鈕上

簡而言之，當焦點在我的按鈕上時，我想更改 svg 的顏色

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

uj5u.com熱心網友回復：

應該將按鈕上的focus(or hover) 和受影響的元素設定為它的子元素。這里似乎也!important有必要。

.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" 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>

標籤：javascripthtmlcss有角度的svg

上一篇：SVGR兩條路徑組合為一條具有相同填充顏色的路徑

下一篇：布林值不從假變為真