Как закрасить svg?

#css #svg

Подскажите, как закрасить svg? т.е. чтобы синим были закрашены не только края, но
и внутри.
Можно ли это сделать только с помощью css? 









    

Ответы

Ответ 1

Ваш svg внутри никак не закрасить, т.к. обрамление сердца в нем и есть вся фигура.

Для того, чтобы добиться нужного вам результата, сохраните svg вот так:



svg {
  fill: #f00;
  stroke: black; // для демонстрации
  stroke-width: 30px; // для демонстрации
}





Чтобы это сделать, откройте ваш исходный в AI , наведите на контур фигуры, нажмите
ПКМ и выберите "Расформировать составной контур". В итоге у вас получится 2 фигуры,
которые можете в дальнейшем использовать.

UPDATE с учетом комментария про наведение на svg:



svg {
  fill: none;
  stroke:#f00;
  stroke-width:30px;
}

svg:hover {
  fill: #f00;
}



Ответ 2

SVG анимация заливки

Анимация реализуется с использованием фильтра    

У  feOffset анимируется атрибут dy  от 1 - незакрашен, до 0 - полностью закрашен 


        
        


Начало анимации при наведении курсора на контур сердца    

begin="ph.mouseover", где ph ID контура сердца.