SVG ..我想填補它的其他sideof我創建

Question

所以我的計劃是創建一個使用路徑和直線形狀的路徑，但問題是我想填補它裏面沒有外面

顏色

，所以我有這樣的代碼

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 

<g style="fill:none;stroke-width:4;"> 
/*head*/ 

<path d="M800,10 
    Q650,100 500,10 
    M300,260 
    Q650,200 500,10 
    M340,310 
    C300,410 
    225,280 300,260 
    M550,550 
    C600,400 
    400,200 340,310 
    M650,710 
    Q630,600 550,550 
    M1000,260 
    Q650,200 800,10 
    M960,310 
    C1000,410 
    1075,280 1000,260 
    M750,550 
    C700,400 
    900,200 960,310 
    M650,710 
    Q670,600 750,550" style="stroke: #73b4d5; fill: Black;"/> 


/*left-bone*/ 

    /*longest-bone*/ 

<line x1="600" y1="170" x2="630" y2="590" 
     style="stroke: #006600;"/> 

    /*shortest-bone*/ 

<path d="M570,540 
    Q565,545 630,590" style="stroke: #28c628; fill: none;"/> 

    /*top-bone*/ 

<path d="M470,260 
    Q530,275 600,170" style="stroke: #76c628; fill: none;"/> 

    /*side-bone*/ 

<path d="M570,540 
    Q600,375 470,260" style="stroke: #28c66e; fill: none;"/> 

/*right-bone*/ 

    /*longest-bone*/ 

<line x1="700" y1="170" x2="670" y2="590" 
     style="stroke: #006600;"/> 

    /*shortest-bone*/ 

<path d="M730,540 
    Q735,545 670,590" style="stroke: #28c628; fill: none;"/> 

    /*top-bone*/ 

<path d="M830,260 
    Q770,275 700,170" style="stroke: #76c628; fill: none;"/> 

    /*side-bone*/ 

<path d="M730,540 
    Q700,375 830,260" style="stroke: #28c66e; fill: none;"/> 

/*eyes*/ 

    <ellipse cx="650" cy="100" rx="70" ry="30" style="stroke:#73b4d5;fill:none;"/> 

</g>  

</svg> 

但是當我運行它填充是形狀之外，我想是充實內心不被外部形狀。

請幫幫我！ tnx很多！

Answer 1

你似乎認爲矢量填充工作像位圖填充。當您在位圖編輯器中應用填充填充時，它將填充由連接線包圍的區域。矢量圖像不會那樣工作。

你不能只繪製一系列單獨的觸摸路徑段，並期望整個事物組合形成可填充的形狀。移動（M）後跟一系列路徑命令（線，貝塞爾等）形成子路徑。每個子路徑將單獨填充。如果你開始一個新的子路徑（即移動），你會得到一個新的填充形狀。

如果您希望「頭」形狀正確填充，則必須繪製具有一條連續邊界路徑的整個形狀。 IE瀏覽器。只有一個M在開始。