2

Собственно, не знаю, как это правильно сделать. Я преобразовал картинку в svg, открыл через текстовый редактор, вытащил код и data, и вставлял через object, но у меня картинка не отображалась.

2 ответа 2

1

Внешним css вы не попадете внутрь object или img. Только javascript. Тут вариант только вставлять svg в html:

svg { width: 150px; height: 150px; }

svg * {
  transition: all .2s;
}

svg circle {
  fill: red;
}

svg *:not(circle) {
  stroke: white;
}

svg:hover circle {
  fill: black;
}

svg:hover *:not(circle) {
  stroke: red;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 45 45" xml:space="preserve">
  <circle cx="22.5" cy="22.5" r="22.5" />
  <polygon fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="30.2,33.5 15.2,33.5 15.2,20.1 10.4,22.5 7,15.8 15.2,11.5 30.2,11.5 38.3,15.8 34.9,22.5 30.2,20.1 	" />
  <path fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M27.5,11.5c0,2.7-2.2,4.8-4.8,4.8s-4.8-2.2-4.8-4.8" />
</svg>

0

Можно подключить через object например:

 <object type="image/svg+xml" data="/images/image.svg"></object>

Далее заливайте линии или бекграунд через сss, гляньте код svg там должны быть классы векторов, выбирайте нужный класс и используйте fill или stroke в зависимости от цели. По идее css уже должен быть сгенерирован в svg объекте.

Ваш ответ

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

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