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在开始。