Как обесцветить svg через css?

Question

[Пащук Илья]

Здравствуйте ребята и ту очередная консультации по работе с я SVG  через CSS, и так у меня есть блок отзывов и в нем есть авка которую я вывожу в фигуру svg, теперь я хочу до активации определенного отзыва наведения для активации обесцветить изображение сделать серым вот здесь смотрите prntscr.com/9vzjrs!
код фигуры

<div class="clo">
		<svg id="ava"viewBox="0 0 172.9 184.3" style="enable-background:new 0 0 172.9 184.3;" xml:space="preserve">
			<pattern id="avatar-1" width="400" height="400" patternUnits="userSpaceOnUse">
				<image xlink:href="img/face1.jpg" >
			</pattern>
			<filter id="shadow" filterUnits="userSpaceOnUse" x="0" y="0"
			width="300" height="300">
				<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
				<feOffset in="blur" dx="0" dy="3" result="offsetBlr" />
				<feFlood flood-color="rgba(0,0,0,.4)"/>
				<feComposite operator="in" in2="offsetBlr" result="colBlur"/>
				<feMerge>
					<feMergeNode in="colBlur"/>
					<feMergeNode in="SourceGraphic"/>
				</feMerge>
			</filter>
			</image>
			<path class="st0" d="M105.3,11.3c15.5,7.9,26.7,14.2,41.3,22.2c14.1,7,16.9,15.5,16.9,33.2c0,16,0,28.3,0,46.3
			c0.1,18-3.5,20.9-17.8,30.2c-13.4,7.7-25.2,14.5-40.3,23c-13.3,8.6-24.6,8.3-36.7,0c-14.8-8-25.6-14.2-40.3-23
			C14,134.6,8.8,127.9,8.6,110.9c0-16.2-0.1-27.9,0-44.2C8.5,50,14.3,41.1,28.3,34.3c15.1-9.4,25.5-15.4,40.3-23
			C85,2.4,89.1,2.3,105.3,11.3z"/>		
		</svg>
	</div>

Стили фигуры

.col{ height: 15
		margin: auto;
	}
	



    .st0, .st1, .st2, .st3, .st4{
    	stroke:#F0F0F0;
    	stroke-width:2.5;s
    	troke-miterlimit:10;
    	filter: url(#shadow);}

    .st0{fill:url(#avatar-1);}
    .st1{fill:url(#avatar-2);}
    .st2{fill:url(#avatar-3);}
    .st3{fill:url(#avatar-4);}
    .st4{fill:url(#avatar-5);}
    #ava  pattern image{height: 150px; width: 150px;}
    #ava{height: 500px;}

Answer 1

[Пащук Илья]

Ребята я решил эту задачу вот так банально просто!

<filter id="myFilter3">		      
		      <feColorMatrix in="a1" type="saturate" values="0"></feColorMatrix>
</filter>

но если у вас есть другие методы выкладывайте интересно как вы решали такую задачу!

Answer 2

[Александр Токмаков]

<style>
    .custom-1 {
    filter: invert(0.5);
    }
    .custom-2 {
    filter:  brightness(0) invert(1);
    }
    </style>
    <img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">
    <img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">
    <img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">