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）后跟一系列路径命令（line，bezier等）形成子路径。每个子路径将单独填充。如果你开始一个新的子路径（即移动），你会得到一个新的填充形状。

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

SVG ..我想在我创建的路径的另一边填充它

1 个答案: