float d3 SVG Element rechts CSS nach oben

Question

Ich habe die folgende Zeichnung auf Leinwand angehängt:

<svg data="BusinessRoleFigure" 
x="180" y="110" 
width="128" height="66" 
id="WA7WAcWA0WAaWA4WA3WA3WA9" 
style="position: relative;"> 

<rect x="0" y="0" 
width="100%" height="100%" 
stroke="rgb(178,178,126)" 
stroke-width="1" fill="rgb(255,255,181)" 
style="position: relative;"> 
</rect> 

<rect stroke="black" 
fill="black" 
class="insider" 
style="right: 0px;top: 0px;"> 
</rect> 

</svg> 

Ich habe die folgende CSS für Klasse .insider

.insider{ 
height:20px; 
width:40px; 
top:0; 
right:0; 
fill:green; 
position:absolute; 
float:right; 
x:40px; 
} 

möchte ich die zweite Rect-Element mit Klassen-Insider, um oben rechts am SVG-Hauptelement zu haften. Ich versuchte float, rechts und oben: 0; rechts: 0; in CSS, aber das macht es nicht bewegen. Wenn ich jedoch den X und Y Wert in der CSS angeben, ändert der Rect seine Position.

JsFiddle

Wie kann ich es in der oberen rechten Ecke machen haften, wenn die Eltern (SVG) geändert wird?

Answer 1

Ihr erwartetes Ergebnis zu erzielen, verwenden Sie bitte die folgende Option
HTML:

<svg data="BusinessRoleFigure" 
x="180" y="110" 
width="128" height="66" 
id="WA7WAcWA0WAaWA4WA3WA3WA9" 
style="position: relative;"> 

<rect x="0" y="0" 
width="100%" height="100%" 
stroke="rgb(178,178,126)" 
stroke-width="1" fill="rgb(255,255,181)" ></rect> 

<rect stroke="black" width="40" 
fill="black" 
class="insider" id="inside" 
> 
</rect> 

</svg> 

JS:

setTimeout(function() { 
    var mainWidth = document.getElementById("WA7WAcWA0WAaWA4WA3WA3WA9").getAttribute('width'); 
    var insideWidth = document.getElementById("inside").getAttribute('width'); 
    var diff = mainWidth - insideWidth; 
    document.getElementById("inside").setAttribute('x', diff); 
}, 1); 

CSS:

.insider{ 
height:20px; 
fill:green; 
} 

Codepen- http://codepen.io/nagasai/pen/grvkqb