Добавление заливки в svg

Question

Я пытаюсь создать значок белого облака с черным контуром. Я работаю от этого пути:

<svg x="0" y="0" width="512" height="512" viewBox="0 0 512 512" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> 
    <path fill="#1D1D1B" d="M400,160c-5.312,0-10.562,0.375-15.792,1.125C354.334,120.417,307.188,96,256,96c-51.188,0-98.312,24.417-128.208,65.125c-5.23-0.75-10.48-1.125-15.792-1.125C50.25,160,0,210.25,0,272s50.25,112,112,112c13.688,0,27.084-2.5,39.709-7.333C180.666,401.917,217.5,416,256,416c38.542,0,75.333-14.083,104.291-39.333C372.916,381.5,386.312,384,400,384c61.75,0,112-50.25,112-112S461.75,160,400,160z M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/> 
</svg> 

Я не могу показаться, чтобы изменить заливку, но, возможно, сам путь оставляет пустой центр, как пончик.

Как заполнить это облако в белом?

Answer 1

Вы определили путь как внешнюю границу и внутреннюю границу, внутренняя часть вашего пути на самом деле является воспринимаемой границей облака и заполняется вашим цветом #1D1D1B.

Самого простое решения, которое я могу думать о том, чтобы добавить еще одно облако формы только с внутренней границей и заполнить это второе облако с любым цветом вы хотите: http://jsfiddle.net/JJJmC/

<path fill="#1D1D1B" d="M400,160c-5.312,0-10.562,0.375-15.792,1.125C354.334,120.417,307.188,96,256,96c-51.188,0-98.312,24.417-128.208,65.125c-5.23-0.75-10.48-1.125-15.792-1.125C50.25,160,0,210.25,0,272s50.25,112,112,112c13.688,0,27.084-2.5,39.709-7.333C180.666,401.917,217.5,416,256,416c38.542,0,75.333-14.083,104.291-39.333C372.916,381.5,386.312,384,400,384c61.75,0,112-50.25,112-112S461.75,160,400,160z M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/> 
<path fill="Pink" d="M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/> 
</svg>