Как управлять градиентов в SVG через CSS?

387

24 ноября 2016, 10:08

Мне нужно чтобы при наведении на блок, у SVG появлялся градиент. Как это реализовать?

.container { 
 width: 100px; 
 height: 100px; 
  background-color: #000; 
          fill: #fff; 
} 
.container:hover .ico { 
         fill: red; 
  } 
.ico { 
 
}

<div class="container"> 
<div class="ico"> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="58" height="58" viewBox="0 0 58 58"> 
    <path d="M0.000,57.999 L0.000,52.199 L58.000,52.199 L58.000,57.999 L0.000,57.999 ZM40.020,31.899 L18.009,31.899 L11.600,46.399 L5.075,46.399 L26.100,-0.001 L31.900,-0.001 L52.925,46.399 L46.400,46.399 L40.020,31.899 ZM29.000,6.988 L20.561,26.099 L37.439,26.099 L29.000,6.988 Z" 
    class="cls-1" /> 
  </svg> 
</div> 
  </div>

Answer 1

Думаю, по примеру все будет ясно. Плавность можно задать через transition.

.container { 
 width: 100px; 
 height: 100px; 
  background-color: #000; 
} 
.container:hover .right { 
         stop-color: orangered; 
  }

<div class="container"> 
<div class="ico"> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="58" height="58" viewBox="0 0 58 58"> 
    <defs> 
        <linearGradient id="Gradient-1" 
             x1="0" y1="0" x2="100%" y2="0"> 
            <stop offset="0%" stop-color="#fff" /> 
            <stop offset="100%" stop-color="#fff" class="right" /> 
        </linearGradient> 
    </defs> 
    <path d="M0.000,57.999 L0.000,52.199 L58.000,52.199 L58.000,57.999 L0.000,57.999 ZM40.020,31.899 L18.009,31.899 L11.600,46.399 L5.075,46.399 L26.100,-0.001 L31.900,-0.001 L52.925,46.399 L46.400,46.399 L40.020,31.899 ZM29.000,6.988 L20.561,26.099 L37.439,26.099 L29.000,6.988 Z" 
    class="cls-1" fill= "url(#Gradient-1)" /> 
  </svg> 
</div> 
  </div>