svg Styling g Element mit Schlaganfall Eigenschaft

Question

Ab zum Beispiel aus dieser Situation:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <g fill="green" stroke="red" stroke-width="5px"> 
     <rect width="180" height="122.85714" x="211.42857" y="335.21936" /> 
     <rect width="211.42857" height="182.85715" x="124.28571" y="375.21933" /> 
    </g> 
    </svg> 

Dank „g“ Eigenschaften wird das Hub-Attribut durch die beiden „rect“ Elemente vererbt.

Dies ist nützlich für mich, wenn die beiden "Rect" -Elemente nicht überlappt sind.

Gibt es eine Technik, um eine eindeutige Kontur (eindeutige Grenze) zu erhalten, wenn die beiden "rect" -Elemente sich überlappen?

Answer 1

Ein paar Zeilen von SnapSVG, um dem überlappenden Rect ein anderes Attribut zu geben. Keine Verknüpfung

var s = Snap('#mySVG'); 
 

 
var g = s.select('#square_group'); 
 

 
var boxA = g.rect(11,11,200,200); 
 
var boxB = g.rect(50,50,180,180); 
 

 
if (Snap.path.isBBoxIntersect(boxA.getBBox(), boxB.getBBox())) { 
 
    boxB.attr({ 
 
    fill: "#bada55", 
 
    stroke: "#000", 
 
    strokeWidth: 5 
 
    }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 

 

 
<svg id="mySVG" width="300" height="300" xmlns="http://www.w3.org/2000/svg"> 
 
    <g id="square_group" fill="green" stroke="red" stroke-width="5px"> 
 
    </g> 
 
    </svg>