將d3 SVG元素浮動到右上角CSS

Question

我將以下圖紙附加到畫布上：

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

我有以下CSS用於class .insider

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

我希望第二個帶有class Insider的rect元素粘貼到主要SVG元素的右上角。 我試過float; right和top：0; 對：0; 在CSS中，但這並不能使其移動。 但是，如果我在CSS中指定X和Y值，則rect會更改其位置。

JsFiddle

調整父級（SVG）的大小時，如何使其固定在右上角？

Answer 1

為了達到預期效果，請使用以下選項
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