5

Подскажите, как закрасить 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>

2 ответа 2

5

Ваш 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>

15
  • а подскажите, как сделать, чтобы закрашивалось только при наведении курсора на svg? Нужны ли здесь две svg, т.е. незакрашенная и закрашенная?
    – word
    11 июл 2017 в 12:53
  • @word при наведении на весь svg или на саму фигуру? Сейчас svg сделан так, что по бокам от фигуры пустые места. Это нужно учитывать.
    – Cheg
    11 июл 2017 в 13:00
  • по бокам не нужны никакие места. При наведении на svg, я ведь про это спрашиваю, как закрасить svg? А что, эти боковые места никак нельзя удалить?
    – word
    11 июл 2017 в 13:03
  • @word в AI откорректирую монтажную область так, чтобы ваша фигура прилегала к ее краям.
    – Cheg
    11 июл 2017 в 13:06
  • меня больше интересует вопрос про то, можно ли сделать ховер только с одним svg?
    – word
    11 июл 2017 в 13:08
3

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

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

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

<feOffset dy="1">
        <animate attributeName="dy" begin="ph.mouseover" from="1" to="0" dur="3s" fill="freeze" />
      </feOffset>  

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

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

<svg id="like" xmlns="http://www.w3.org/2000/svg" viewBox="0 50 612 792" width="100%" height="100%">
 <defs>
    <filter id="fillHeart" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
      <feOffset dy="1">
        <animate attributeName="dy" begin="ph.mouseover" from="1" to="0" dur="3s" fill="freeze" />
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  </defs>
<path id="ph" transform="scale(0.45)" filter="url(#fillHeart)" style="fill:white;stroke:red; stroke-width:2;" 

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>

Ваш ответ

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

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