svgグループ化されたポリラインを塗りつぶして塗りつぶす

Question

私はモーメントでsvg floorplanを作成しています。複数のパスがグループ化されていて、出入り口を表すパスが途切れています。

私は完全な塗りつぶしが得られないので、部分的に塗りつぶされ、等角図形で構成されています。結合されていないパスがあっても完全にグループを埋める方法はありますか？

私のコードは、私がやろうとしています何

<g id="Group" stroke="none" stroke-width="1" fill="blue" fill-rule="evenodd" transform="translate(66.000000, 103.000000)"> 
    <path d="M184.068359,305.802734 L143.80664,305.802734" id="Path-17" stroke="#979797"></path> 
    <polyline id="Path-18" stroke="#979797" points="93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072"></polyline> 
    <polyline id="Path-19" stroke="#979797" points="188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195"></polyline> 
    <polyline id="Path-20" stroke="#979797" points="284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"></polyline> 
</g> 

は青と赤のストローク内のすべてを満たし、それを完全塗りつぶし作るのですか？ I以下のコードで

https://jsbin.com/reyunufeno/edit?html,output

Answer 1

出入り口の上に「ジャンプ」する「ペン」の原因となる新しい「M」とそれぞれを始め、一つのパスにあなたの形状要素のすべてを合併しています。元の私はストロークを赤色にし、塗りつぶしを "なし"にしました。私はちょうど元のパスをコピーし、内部の "M"を削除して出入り口のフロアの輪郭を "接続"し、コピーのストロークを除去し、コピーを青で埋めました。

<svg width="300" height="320"> 
 
    <g transform="translate(5,5)"> 
 
    <path stroke="red" stroke-width="10" fill="none" d="M184.068359,305.802734 L143.80664,305.802734 M93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072 M188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195 M284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"/> 
 
    <path fill="blue"        d="M184.068359,305.802734 L143.80664,305.802734 93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072 188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195 284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"/> 
 
    </g> 
 
</svg>