svg填充分組多段線以填充形狀

我正在創建一個svg平面佈置圖，它由多個組合在一起的路徑組成，其中代表門廊的路徑有一箇中斷。svg填充分組多段線以填充形狀

但是，我嘗試並填充我的組，我沒有得到完整的填充，我得到填充是部分和等距形狀組成的，有沒有辦法填補一個組，甚至當我有非加入路徑？

我的代碼，

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

我所試圖做的是填補了紅色的筆劃藍色裏面的一切，但要完整填充？

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

來源

2017-02-09 Udders

你需要的東西轉換成一個單一的路徑。 –

對不起，你的意思是？ – Udders

獲取折線元素，將它們轉換爲路徑d值並將其添加到現有路徑的d值 –

在下面的代碼我已經合併所有的形狀要素之間的一個路徑，開始每一個新的「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>

來源

2017-02-09 23:28:58

svg填充分組多段線以填充形狀

回答

相關問題