1

у меня есть svg изображение, которое я вывожу через <img>

.social {
  display: inline-block;
  height: 16px;
  margin: 5px 5px 0px 0px;
}

.social:first-child {
  margin-left: 20px;
}

.svg {
  fill: orange;
}
<!-- img class = 'social' src = 'images/social_optimized/twitter.svg' -->


<svg xmlns="http://www.w3.org/2000/svg" width="29.5" height="24" viewBox="0 0 299 243.2">
    	<path class="svg" d="m93.7 242.2c112.5 0 174-93.2 174-174 0-2.6-0.1-5.3-0.2-7.9 11.9-8.6 22.3-19.4 30.5-31.7-11 4.9-22.7 8.1-35.1 9.6 12.6-7.6 22.3-19.5 26.9-33.8-11.8 7-24.9 12.1-38.8 14.8-11.2-11.9-27-19.3-44.6-19.3-33.8 0-61.1 27.4-61.1 61.1 0 4.8 0.5 9.5 1.6 13.9-50.8-2.6-95.9-26.9-126-63.9-5.3 9-8.3 19.5-8.3 30.7 0 21.2 10.8 39.9 27.2 50.9-10-0.3-19.5-3.1-27.7-7.6 0 0.3 0 0.5 0 0.8 0 29.6 21.1 54.3 49.1 59.9-5.1 1.4-10.5 2.2-16.1 2.2-3.9 0-7.8-0.4-11.5-1.1 7.8 24.3 30.4 42 57.1 42.5-20.9 16.4-47.3 26.2-75.9 26.2-4.9 0-9.8-0.3-14.6-0.8 27.1 17.3 59.2 27.5 93.7 27.5" />
    </svg>

Но ничего не срабатывает - в чем может быть дело?

0

1 ответ 1

2

У меня работает !

Что я сделал, я полностью все стили вынес отдельно, добавил группировку слоя и вместо class указал идентификатор для g и для эксперимента сделал hover

#svg {
  stroke: red;
  stroke-width: 12px;
  fill: blue;
  transform: translate(0, 40px);
  transition: .5s;
}

#svg:hover {
  stroke: blue;
  stroke-width: 12px;
  fill: red;
  transform: translate(0, 20px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <g id="svg" >
    	<path  d="m93.7 242.2c112.5 0 174-93.2 174-174 0-2.6-0.1-5.3-0.2-7.9 11.9-8.6 22.3-19.4 30.5-31.7-11 4.9-22.7 8.1-35.1 9.6 12.6-7.6 22.3-19.5 26.9-33.8-11.8 7-24.9 12.1-38.8 14.8-11.2-11.9-27-19.3-44.6-19.3-33.8 0-61.1 27.4-61.1 61.1 0 4.8 0.5 9.5 1.6 13.9-50.8-2.6-95.9-26.9-126-63.9-5.3 9-8.3 19.5-8.3 30.7 0 21.2 10.8 39.9 27.2 50.9-10-0.3-19.5-3.1-27.7-7.6 0 0.3 0 0.5 0 0.8 0 29.6 21.1 54.3 49.1 59.9-5.1 1.4-10.5 2.2-16.1 2.2-3.9 0-7.8-0.4-11.5-1.1 7.8 24.3 30.4 42 57.1 42.5-20.9 16.4-47.3 26.2-75.9 26.2-4.9 0-9.8-0.3-14.6-0.8 27.1 17.3 59.2 27.5 93.7 27.5" />
  </g>
    </svg>

7
  • Максим, вы используете svg, а я img - у меня svg в виде файла записан, я не хочу его в html код тащить
    – Zhihar
    Commented 12 мая 2018 в 13:16
  • 1
    ну вообще svg как тег img не управляется через style либо вынесите svg куда не будь вверх а саму иконку выводите через use и тогда можно будет управлять через стили
    – user33274
    Commented 12 мая 2018 в 13:18
  • @Zhihar не получилось ?
    – user33274
    Commented 12 мая 2018 в 13:47
  • через svg все ок жаль, что через img никак и жалко, что через svg нельзя указать не код, а файл (я не нашел во всяком случае) - это бы полностью решило проблему
    – Zhihar
    Commented 12 мая 2018 в 15:49
  • @МаксимЛенский, с помощью JS это можно исправить
    – Arthur
    Commented 12 мая 2018 в 17:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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