Wie entfernen Formen von gefülltem SVG Pfad

Ich habe diese Geige: https://jsfiddle.net/thatOneGuy/1spn8nne/1/Wie entfernen Formen von gefülltem SVG Pfad

Diese beiden Wege hat, denn jetzt sind sie nur rect sind aber eigentlich komplizierte Form. Ich habe diesen Code verwenden zwei Rects zu schaffen, mit ‚Löchern‘ in:

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

Was ich brauche, sind die Löcher aus dem gefüllten Pfad entfernt werden, so dass Sie die rect dahinter sehen können.

Wie gehe ich beim Entfernen einer Form (Kreis) von einem gefüllten Pfad?

EDIT

ich gerade festgestellt haben, wahrscheinlich ein Clip-Pfad für diese gut funktionieren wird, werde ich versuchen, implementieren, aber wenn jemand eine Idee hat, würde ich die Hilfe zu schätzen wissen :)

Quelle

2016-07-29 thatOneGuy

Nein, das ist nur Füllung von keiner auf den Kreisen. Ich möchte, dass diese Kreise von den entsprechenden gefüllten Pfaden entfernt werden, d. H. Die Rechtecke. – thatOneGuy

Oh meinst du, anstatt einen rect + Kreis zu haben, willst du einen rect - circle? –

genau @TimB, ich denke Clip-Pfad wird gut funktionieren, versuchen, jetzt zu implementieren – thatOneGuy

Hier ist ein Weg, um ein Rect mit einem Loch zu zeichnen. Es beruht auf der Evenodd-Füll-Regel. Der Kreis ist innerhalb des Rect, es wird ein Loch im Rect und der blaue Hintergrund zeigt sich.

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

Quelle

2016-07-29 09:37:16

Great Zeug, das wird sehr helfen, danke, zu schätzen – thatOneGuy

Haben Sie eine Idee, wie Sie den kombinierten Pfad aus erstellen die Daten, die ich zur Verfügung gestellt habe? Ich habe die Punkte für das Rect und Punkte für die Kreise in der Frage – thatOneGuy

Tthe Kreis wird vom elliptischen Bogen gebildet (ein Befehl, der vorherige M-Befehl und das abschließende Z). Der Rest bildet das Rect. –

@ Robert Longson gab eine nette Antwort, aber ich war nicht in der Lage, es zu duplizieren meine Daten-Set und D3 verwendet wird. Also, dank @PaulLeBeau für seinen Punkt über masks.

Für die Maske benötigen Sie ein Rect-Element, gefüllt weiß, damit es funktioniert. Es benutzt das, um zu wissen, was ich vor mir verbergen soll (denke ich).

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

Und in dem gleichen Maskenelement benötigen Sie den Rest der Formen, die Sie aus dem Pfad entfernen möchten.

Also in meinem Fall wollte ich eine Sammlung von Kreisen:

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

Und das ist es. Ich habe die Geige aktualisiert: https://jsfiddle.net/thatOneGuy/1spn8nne/4/

Quelle

2016-07-29 12:27:41 thatOneGuy

Wie entfernen Formen von gefülltem SVG Pfad

Antwort

Verwandte Themen