更改svg图片颜色

更改svg图片颜色

以实例表示
给到一张svg格式图片，代码如下

<svg width="22" height="22" viewBox="0 0 22 22" fill="" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7776 3.22191C14.4817 -1.07397 7.51778 -1.07397 3.22191 3.22191C-1.07397 7.51778 -1.07397 14.4817 3.22191 18.7776C7.51778 23.0735 14.4817 23.0735 18.7776 18.7776C23.0735 14.4817 23.0735 7.51778 18.7776 3.22191ZM12.123 2.06997C14.0388 2.30964 15.8923 3.16502 17.3634 4.63612C17.9196 5.19232 18.3878 5.80318 18.7679 6.45139C18.7764 6.46812 18.7854 6.48471 18.7949 6.50114C19.7858 8.21349 19.2827 10.4012 17.6421 11.5119C17.6338 11.5175 17.6255 11.5233 17.6173 11.5292C16.3567 12.367 14.7237 12.3692 13.4656 11.5499C13.4111 11.5144 13.3574 11.4774 13.3044 11.4389L12.3979 10.7798L13.0575 9.87269C14.4873 7.90668 14.5327 5.2558 13.1719 3.2408C13.1647 3.23018 13.1573 3.21971 13.1498 3.20938C12.8528 2.77624 12.5065 2.39546 12.123 2.06997ZM6.43114 3.24348C5.79045 3.62151 5.18652 4.08572 4.63612 4.63612C3.16453 6.10771 2.30907 7.96192 2.06973 9.87837C2.3951 9.49492 2.77578 9.14845 3.20892 8.85137C3.21921 8.84382 3.22966 8.83647 3.24024 8.82932C5.25452 7.4681 7.90544 7.51396 9.87222 8.94338L10.7803 9.60366L11.4399 8.69653C11.4784 8.64357 11.5154 8.58983 11.5509 8.5354C12.3702 7.27725 12.368 5.64427 11.5302 4.38364C11.5243 4.37547 11.5185 4.36721 11.5129 4.35886C10.4021 2.71828 8.21447 2.21517 6.50213 3.20606C6.47876 3.21958 6.45508 3.23205 6.43114 3.24348ZM3.23761 15.5584C3.61669 16.2028 4.08286 16.8101 4.63612 17.3634C6.10748 18.8347 7.96136 19.6902 9.87749 19.9297C9.49478 19.6046 9.14896 19.2245 8.85236 18.7921C8.84481 18.7818 8.83745 18.7713 8.8303 18.7607C7.46909 16.7465 7.51495 14.0955 8.94436 12.1287L9.60418 11.2213L8.69641 10.5612C7.41768 9.63199 5.69724 9.59706 4.38356 10.4707C4.37539 10.4766 4.36712 10.4824 4.35877 10.488C2.71958 11.5984 2.21637 13.7843 3.20637 15.4999C3.2175 15.5192 3.22791 15.5387 3.23761 15.5584ZM15.5316 18.7776C16.1859 18.3957 16.8025 17.9243 17.3634 17.3634C18.8343 15.8925 19.6896 14.0394 19.9294 12.1239C19.6043 12.5066 19.224 12.8523 18.7916 13.1488C18.7813 13.1564 18.7708 13.1637 18.7602 13.1709C16.7452 14.5317 14.0943 14.4863 12.1283 13.0565L11.2218 12.3974L10.5622 13.3046C9.63298 14.5833 9.59804 16.3037 10.4717 17.6174C10.4752 17.6223 10.4787 17.6272 10.4821 17.6321C10.4844 17.6355 10.4867 17.6388 10.489 17.6422C11.5994 19.2814 13.7853 19.7846 15.5009 18.7946C15.5111 18.7887 15.5213 18.7831 15.5316 18.7776Z" fill="back"/>
</svg>

引入图片

<div>
   <img
     src="文件名.svg"
     alt=""
     class="test-test"
   />
 </div>

效果如下

css样式更改颜色

  .test-test {
    transform: translateX(-500px);
    filter: drop-shadow(red 500px 0);
  }

效果如下

本质上是给svg加了一个遮罩，把本来的颜色给盖住了