0

所以我的项目是使用路径和线条创建一个形状，但问题是我想在里面而不是外面填充颜色

所以我有这个代码

<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>

但是当我运行它时，填充在形状之外，我想要的是在里面而不是在外面填充形状。

请帮我！很多！

4

1 回答 1

1

您似乎认为矢量填充像位图填充一样工作。当您在位图编辑器中应用泛滥填充时，它将填充由连接线包围的区域。矢量图像不能那样工作。

您不能只绘制一系列单独的接触路径段，并期望整个事物组合在一起形成一个可以填充的形状。移动 (M) 后跟一系列路径命令（线、贝塞尔等）形成子路径。每个子路径将单独填充。如果你开始一个新的子路径（即移动），你会得到一个新的填充形状。

如果您希望正确填充“头部”形状，则必须使用一条连续的边界路径绘制整个形状。IE。一开始只有一个M。

于 2013-09-17T02:16:10.233 回答