1

Мне нужно чтобы при наведении на блок, у 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>

1 ответ 1

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>

4
  • Спасибо, работает. А не подскажите, как применить такой градиент background-image: linear-gradient(60deg, #fc803b 0%, #e85867 97%, #e85867 100%); 21 ноя 2016 в 20:55
  • codepen.io/Giryayev/pen/ENWLgq 21 ноя 2016 в 21:07
  • Немного изменил пример, смотрите по ссылке вверху. 22 ноя 2016 в 6:52
  • Спасибо, да! Это то, что нужно. 22 ноя 2016 в 7:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.