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>

我有类 .insider

的以下CSS

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

我希望带有类内部人员的第二个rect元素粘在主SVG元素的右上角。我试过浮动;右边和顶部：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

将d3 SVG元素浮动到右上角的CSS

1 个答案: