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 you have read our privacy policy.

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