將填充添加到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>