2

У меня есть svg-иконка YouTube, которая изначально полностью белая, а при наведении должна становиться цветной. Конечно можно заранее создать обе иконки и при наведении заменять первую, но хотелось бы обойтись одной иконкой. Эта иконка находится в спрайте, которую я подключаю на страницу через object. Вот код символа:

<symbol id="ytb" viewBox="0 0 543.9 516.5">
  <path class="st1" d="M91.7 0h40.8l5.2 21 4.4 15.5 3.6 15.2 3.6 15.8 2.8 13.3h1.6l2.8-13.3 3.2-15.8 4-15.2 4-15.5 5.7-21H213l-42 126v89.5h-37.6V126L91.7 0z"/>
  <path class="st2" d="M263.7 53c31.9 0 48.1 15.2 48.1 45.2v74.3c0 30-16.2 45.2-48.1 45.2s-48.1-15.2-48.1-45.2V98.2c0-30 16.2-45.2 48.1-45.2zm0 25.8c-8.5 0-12.9 5.2-12.9 14.9V177c0 9.4 4.8 14.9 12.9 14.9 8.1 0 12.9-5.5 12.9-14.9V93.7c0-9.7-4.8-14.9-12.9-14.9z"/>
  <path class="st3" d="M411.9 215.5l-2.8-13.9c-14.5 12-23 16.2-33.1 16.2-8.5 0-17.4-3.9-21.4-9.1-4.4-5.5-5.7-11.3-5.7-27.8v-126H384v125c0 8.1 2.8 12 9.3 12 4.4 0 8.5-1.6 15.8-6.5V54.9h35.1v160.6h-32.3z"/>
  <path class="st4" d="M94.6 244.8C42.4 244.8 0 287.1 0 339.4v82.5c0 52.2 42.4 94.5 94.6 94.5h354.7c52.2 0 94.6-42.3 94.6-94.5v-82.5c0-52.2-42.4-94.6-94.6-94.6H94.6zm-43.7 36.4h99.5v25.5H117v170.4H82.9V306.7h-32v-25.5zm226.6 0h31.9v63.7c12.5-11.2 20.9-15.6 30.5-15.6 7.3 0 15.4 3.5 19.1 8.2 4 5.3 5.2 10.6 5.2 26.2v81c0 15.3-1.1 20.5-5.2 25.8-3.7 5-11.7 8.5-19.4 8.5-9.6 0-17.7-4.4-30.2-15.8V477h-31.9V281.2zM442 329.3c26.4 0 42.9 13.8 42.9 36.4v42.9h-55.4v32c0 10.6 3.3 15 11.7 15 4 0 7.7-1.8 9.5-4.4 1.8-2.6 2.3-5.8 2.3-16.4V426h31.9v5.3c.4 3.8.4 6.5.4 7.9 0 25.8-15.8 39.9-44.8 39.9-27.5 0-43-14.6-43-41.1v-67.9c0-27.6 14.7-40.8 44.5-40.8zm-285.7 1.8h32v113.7c0 7.3 2.5 10.8 8.4 10.8 4 0 7.7-1.4 14.3-5.8V331.1h32v146h-29.4l-2.6-12.7c-13.2 10.9-20.9 14.7-30.1 14.7-7.7 0-15.8-3.5-19.5-8.2-4-5-5.2-10.3-5.2-25.3l.1-114.5zm167.4 21.7c-4 0-7.7 1.5-14.3 5.9v91c6.6 4.4 10.3 5.8 14.3 5.8 5.9 0 8.5-3.5 8.5-10.8v-81.1c0-7.5-2.6-10.8-8.5-10.8zm117.5 0c-7.3 0-11.7 3.8-11.7 10.6V388H453v-24.7c-.1-6.7-4.5-10.5-11.8-10.5z"/>
</symbol>

По-умолчанию у SVG через CSS задан fill: #fff. Думал, что при наведении мыши нужно прописать классам st1/2/3/4 fill другие цвета и дело сделано, но увы нет. Помогите разобраться в этом.

1
  • Получается так. Там отдельный путь на буквы и на красный овал. 7 июн 2018 в 15:42

2 ответа 2

2

path {
  transition: 300ms;
}

svg:hover .st1 {
  fill: forestgreen;
}

svg:hover .st2 {
  fill: orange;
}

svg:hover .st3 {
  fill: gray;
}

svg:hover .st4 {
  fill: crimson;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="ytb" viewBox="0 0 543.9 516.5">
    <path class="st1" d="M91.7 0h40.8l5.2 21 4.4 15.5 3.6 15.2 3.6 15.8 2.8 13.3h1.6l2.8-13.3 3.2-15.8 4-15.2 4-15.5 5.7-21H213l-42 126v89.5h-37.6V126L91.7 0z"/>
    <path class="st2" d="M263.7 53c31.9 0 48.1 15.2 48.1 45.2v74.3c0 30-16.2 45.2-48.1 45.2s-48.1-15.2-48.1-45.2V98.2c0-30 16.2-45.2 48.1-45.2zm0 25.8c-8.5 0-12.9 5.2-12.9 14.9V177c0 9.4 4.8 14.9 12.9 14.9 8.1 0 12.9-5.5 12.9-14.9V93.7c0-9.7-4.8-14.9-12.9-14.9z"/>
    <path class="st3" d="M411.9 215.5l-2.8-13.9c-14.5 12-23 16.2-33.1 16.2-8.5 0-17.4-3.9-21.4-9.1-4.4-5.5-5.7-11.3-5.7-27.8v-126H384v125c0 8.1 2.8 12 9.3 12 4.4 0 8.5-1.6 15.8-6.5V54.9h35.1v160.6h-32.3z"/>
    <path class="st4" d="M94.6 244.8C42.4 244.8 0 287.1 0 339.4v82.5c0 52.2 42.4 94.5 94.6 94.5h354.7c52.2 0 94.6-42.3 94.6-94.5v-82.5c0-52.2-42.4-94.6-94.6-94.6H94.6zm-43.7 36.4h99.5v25.5H117v170.4H82.9V306.7h-32v-25.5zm226.6 0h31.9v63.7c12.5-11.2 20.9-15.6 30.5-15.6 7.3 0 15.4 3.5 19.1 8.2 4 5.3 5.2 10.6 5.2 26.2v81c0 15.3-1.1 20.5-5.2 25.8-3.7 5-11.7 8.5-19.4 8.5-9.6 0-17.7-4.4-30.2-15.8V477h-31.9V281.2zM442 329.3c26.4 0 42.9 13.8 42.9 36.4v42.9h-55.4v32c0 10.6 3.3 15 11.7 15 4 0 7.7-1.8 9.5-4.4 1.8-2.6 2.3-5.8 2.3-16.4V426h31.9v5.3c.4 3.8.4 6.5.4 7.9 0 25.8-15.8 39.9-44.8 39.9-27.5 0-43-14.6-43-41.1v-67.9c0-27.6 14.7-40.8 44.5-40.8zm-285.7 1.8h32v113.7c0 7.3 2.5 10.8 8.4 10.8 4 0 7.7-1.4 14.3-5.8V331.1h32v146h-29.4l-2.6-12.7c-13.2 10.9-20.9 14.7-30.1 14.7-7.7 0-15.8-3.5-19.5-8.2-4-5-5.2-10.3-5.2-25.3l.1-114.5zm167.4 21.7c-4 0-7.7 1.5-14.3 5.9v91c6.6 4.4 10.3 5.8 14.3 5.8 5.9 0 8.5-3.5 8.5-10.8v-81.1c0-7.5-2.6-10.8-8.5-10.8zm117.5 0c-7.3 0-11.7 3.8-11.7 10.6V388H453v-24.7c-.1-6.7-4.5-10.5-11.8-10.5z"/>
  </symbol>
  <use xlink:href="#ytb"/>
</svg>

7
  • Проверил как со своим кодом, так и на данном чистом примере....Безрезультатно, даже пробовал с !important без hover'а, цвет меняется только при задании fill'а самому use, но цвет меняется полностью у всей иконки... 7 июн 2018 в 16:33
  • @Сергей, смотрите у себя в коде, как видите, в моём результате всё работает
    – Arthur
    7 июн 2018 в 16:44
  • 1
    Да, я как раз разбираюсь. Заранее спасибо, надеюсь, с примером я уж точно разберусь) 7 июн 2018 в 16:46
  • не работает в FF ...как обычно
    – user33274
    8 июн 2018 в 1:36
  • Да у меня тоже не работает. Видимо, через object это нереально... 8 июн 2018 в 2:52
1

Проверил в Edge, Firefox,Chrome - везде работает , единственный не достаток jQuery

function changeFill() {
  var path1 = $(".st1");

  $("svg").mouseover(function() {
    $(path1).css({
      "fill": "blue"
    });
  });


  var path2 = $(".st2");

  $("svg").mouseover(function() {
    $(path2).css({
      "fill": "green"
    });
  });


  var path3 = $(".st3");

  $("svg").mouseover(function() {
    $(path3).css({
      "fill": "red"
    });
  });



  var path4 = $(".st4");

  $("svg").mouseover(function() {
    $(path4).css({
      "fill": "pink"
    });
  });
};

changeFill();

$("#fl").mouseout(function() {
  $("svg path").css({
    "fill": "#000"
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<svg version="1.1" id="fl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="ytb" viewBox="0 0 543.9 516.5">
    <path class="st1" d="M91.7 0h40.8l5.2 21 4.4 15.5 3.6 15.2 3.6 15.8 2.8 13.3h1.6l2.8-13.3 3.2-15.8 4-15.2 4-15.5 5.7-21H213l-42 126v89.5h-37.6V126L91.7 0z"/>
    <path class="st2" d="M263.7 53c31.9 0 48.1 15.2 48.1 45.2v74.3c0 30-16.2 45.2-48.1 45.2s-48.1-15.2-48.1-45.2V98.2c0-30 16.2-45.2 48.1-45.2zm0 25.8c-8.5 0-12.9 5.2-12.9 14.9V177c0 9.4 4.8 14.9 12.9 14.9 8.1 0 12.9-5.5 12.9-14.9V93.7c0-9.7-4.8-14.9-12.9-14.9z"/>
    <path class="st3" d="M411.9 215.5l-2.8-13.9c-14.5 12-23 16.2-33.1 16.2-8.5 0-17.4-3.9-21.4-9.1-4.4-5.5-5.7-11.3-5.7-27.8v-126H384v125c0 8.1 2.8 12 9.3 12 4.4 0 8.5-1.6 15.8-6.5V54.9h35.1v160.6h-32.3z"/>
    <path class="st4" d="M94.6 244.8C42.4 244.8 0 287.1 0 339.4v82.5c0 52.2 42.4 94.5 94.6 94.5h354.7c52.2 0 94.6-42.3 94.6-94.5v-82.5c0-52.2-42.4-94.6-94.6-94.6H94.6zm-43.7 36.4h99.5v25.5H117v170.4H82.9V306.7h-32v-25.5zm226.6 0h31.9v63.7c12.5-11.2 20.9-15.6 30.5-15.6 7.3 0 15.4 3.5 19.1 8.2 4 5.3 5.2 10.6 5.2 26.2v81c0 15.3-1.1 20.5-5.2 25.8-3.7 5-11.7 8.5-19.4 8.5-9.6 0-17.7-4.4-30.2-15.8V477h-31.9V281.2zM442 329.3c26.4 0 42.9 13.8 42.9 36.4v42.9h-55.4v32c0 10.6 3.3 15 11.7 15 4 0 7.7-1.8 9.5-4.4 1.8-2.6 2.3-5.8 2.3-16.4V426h31.9v5.3c.4 3.8.4 6.5.4 7.9 0 25.8-15.8 39.9-44.8 39.9-27.5 0-43-14.6-43-41.1v-67.9c0-27.6 14.7-40.8 44.5-40.8zm-285.7 1.8h32v113.7c0 7.3 2.5 10.8 8.4 10.8 4 0 7.7-1.4 14.3-5.8V331.1h32v146h-29.4l-2.6-12.7c-13.2 10.9-20.9 14.7-30.1 14.7-7.7 0-15.8-3.5-19.5-8.2-4-5-5.2-10.3-5.2-25.3l.1-114.5zm167.4 21.7c-4 0-7.7 1.5-14.3 5.9v91c6.6 4.4 10.3 5.8 14.3 5.8 5.9 0 8.5-3.5 8.5-10.8v-81.1c0-7.5-2.6-10.8-8.5-10.8zm117.5 0c-7.3 0-11.7 3.8-11.7 10.6V388H453v-24.7c-.1-6.7-4.5-10.5-11.8-10.5z"/>
  </symbol>
  <use xlink:href="#ytb" id="svgfill"/>
</svg>

Ваш ответ

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

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