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

241

13 июля 2017, 00:34

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

<svg id="like" viewBox="0 0 612 792" width="100%" height="100%"><path d="M610.988,281.167c-8.934-98.326-78.529-169.664-165.627-169.664c-58.025,0-111.154,31.226-141.051,81.271  c-29.625-50.693-80.576-81.283-137.672-81.283c-87.085,0-156.692,71.337-165.614,169.664c-0.706,4.343-3.602,27.2,5.202,64.476  C18.914,399.396,48.221,448.3,90.958,487.022L304.17,680.508l216.872-193.474c42.736-38.734,72.044-87.627,84.731-141.403  C614.578,308.367,611.683,285.51,610.988,281.167z M582.857,340.24c-11.581,49.104-38.429,93.841-77.563,129.292L304.311,648.847  L106.777,469.579c-39.206-35.521-66.041-80.247-77.635-129.351c-8.333-35.274-4.908-55.201-4.896-55.331l0.176-1.189  c7.651-86.144,67.454-148.677,142.216-148.677c55.166,0,103.729,33.897,126.774,88.451l10.84,25.694l10.84-25.694  c22.681-53.718,73.81-88.439,130.281-88.439c74.751,0,134.565,62.534,142.369,149.795  C587.766,285.027,591.19,304.966,582.857,340.24z"></path></svg>

Answer 1

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

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

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

<svg id="like" viewBox="0 0 612 792" width="100%" height="100%"><path d="M562.413,284.393c-9.68,41.044-32.121,78.438-64.831,108.07L329.588,542.345l-165.11-149.843 c-32.771-29.691-55.201-67.076-64.892-108.12c-6.965-29.484-4.103-46.14-4.092-46.249l0.147-0.994 c6.395-72.004,56.382-124.273,118.873-124.273c46.111,0,86.703,28.333,105.965,73.933l9.061,21.477l9.061-21.477 c18.958-44.901,61.694-73.922,108.896-73.922c62.481,0,112.478,52.27,119,125.208C566.517,238.242,569.379,254.908,562.413,284.393z"/></svg>

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

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

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

<svg id="like" viewBox="0 0 612 792" width="100%" height="100%"><path d="M562.413,284.393c-9.68,41.044-32.121,78.438-64.831,108.07L329.588,542.345l-165.11-149.843 c-32.771-29.691-55.201-67.076-64.892-108.12c-6.965-29.484-4.103-46.14-4.092-46.249l0.147-0.994 c6.395-72.004,56.382-124.273,118.873-124.273c46.111,0,86.703,28.333,105.965,73.933l9.061,21.477l9.061-21.477 c18.958-44.901,61.694-73.922,108.896-73.922c62.481,0,112.478,52.27,119,125.208C566.517,238.242,569.379,254.908,562.413,284.393z"/></svg>