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

float d3 SVG element to top right corner CSS

本文关键字：右上角 CSS d3 SVG 元素      更新时间：2023-09-26

我在画布上附加了以下图形：

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

我为类.inder提供了以下CSS

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

我希望第二个rect元素（带有类内部）固定在主SVG元素的右上角。我尝试了浮动；右和顶部：0；右：0，但这并不能使它移动。但是，如果我在CSS中指定X和Y值，则rect会更改其位置。

Js报价

当调整父对象（SVG）的大小时，如何使其保持在右上角？

要达到预期效果，请使用以下选项
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;
}

代码笔-http://codepen.io/nagasai/pen/grvkqb

相关文章：