如何移除填充SVG路徑

形狀我有這樣的小提琴：https://jsfiddle.net/thatOneGuy/1spn8nne/1/如何移除填充SVG路徑

這有兩個路徑，現在，他們只是矩形但實際上卻是複雜的形狀。我已經使用這個代碼與在「洞」創建兩個rects：

createRects(dataPointsPath2, 'blue'); 
createHoles(dataPointsCircle2); 
createRects(dataPointsPath1, 'red'); 
createHoles(dataPointsCircle1);

我需要的是從填充路徑刪除，所以你可以看到它背後的矩形孔。

我該如何去除填充路徑中的形狀（圓形）？

編輯

我剛剛意識到，剪輯路徑可能會爲這項工作做得很好，我會盡力實現，但如果有人有任何想法，我會很感激的幫助:)

來源

2016-07-29 thatOneGuy

不，這只是在圈子上填充沒有。我希望那些圓圈可以從相應的填充路徑中移除，即矩形 – thatOneGuy

哦，你的意思是，不是有一個矩形+圓，而是想要一個矩形圓？ –

究竟@TimB，我認爲剪輯路徑將運行良好，試圖現在執行 – thatOneGuy

這裏有一種方法用一個洞來畫一個矩形。它依靠evenodd填充規則。圓形在矩形內，它在矩形中變成了一個洞，藍色背景顯示出來。

<svg viewBox="0 0 250 250"> 
 
    <rect width="100%" height="100%" fill="blue"/> 
 
    <path fill="#b4edb4" fill-rule="evenodd" d="M230,230H8V13h223 
 
\t V236z M 120 80 a 50 50 0 1 0 0.00001 0z"/> 
 
</svg>

來源

2016-07-29 09:37:16

偉大的東西，這將有助於很多，謝謝，欣賞它 – thatOneGuy

你有任何想法如何創建組合的路徑從我提供的數據？我在問題 – thatOneGuy

中得到矩形的點和圓的點。圓由橢圓弧（一個命令，先前的M命令和最終的Z）形成。其餘形式的矩形。 –

@Robert Longson給了一個很好的答案，但我無法用我的數據集和D3複製它。所以，感謝@PaulLeBeau對他的觀點masks。

對於面具，您需要一個rect元素，填充白色才能使用。它使用這個知道要掩蓋什麼（我認爲）。

var thisMask = thisContainer.append("svg:mask") 
    .attr("id", board + '_mask') 

    thisMask.append("rect") 
    .attr('x', 0) 
    .attr('y', 0) 
    .attr('width', "100%") 
    .attr('height', "100%") 
    .style('fill','white')

而且在同一個面具元素，你需要你想從路徑中刪除形狀的其餘部分。

所以在我的情況，我想圓的集合：

thisMask.selectAll('.circle') 
    .data(data) 
    .enter() 
    .append("circle") 
    .attr('cx', function(d) { 
     console.log('clippath', d) 
     return d.x 
    }) 
    .attr('cy', function(d) { 
     return d.y 
    }) 
    .attr('r', function(d) { 
     return d.radius 
    })

就是這樣。我更新了小提琴：https://jsfiddle.net/thatOneGuy/1spn8nne/4/

來源

2016-07-29 12:27:41 thatOneGuy

如何移除填充SVG路徑

回答

相關問題