Javascript 移动<；文本>；在svg元素中_Javascript_Css_D3.js_Svg

Javascript 移动<；文本>；在svg元素中

javascript css d3.js svg

Javascript 移动<；文本>；在svg元素中,javascript,css,d3.js,svg,Javascript,Css,D3.js,Svg,我试图在SVG图形上覆盖一个元素。为了简单起见，我将其重新创建为一个带有文本覆盖的矩形。我将对文本进行一些非常严肃的格式化和样式设置，但现在我正试图弄清楚为什么我不能在页面上放低一点。我尝试过改变元素上的“x”和“y”，但它根本不移动。有人能帮忙吗？我想将文本移到黄色SVG矩形的下方以下是完整的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <

我试图在SVG图形上覆盖一个元素。为了简单起见，我将其重新创建为一个带有文本覆盖的矩形。我将对文本进行一些非常严肃的格式化和样式设置，但现在我正试图弄清楚为什么我不能在页面上放低一点。我尝试过改变元素上的“x”和“y”，但它根本不移动。有人能帮忙吗？我想将文本移到黄色SVG矩形的下方

以下是完整的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Title Here</title>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <style type="text/css">

    ul {
        position:absolute;
     }
  </style>
</head>

<body>
  <p>Click me</p>
  <ul><text x="40" y="90">Test</text></ul>
  <script type="text/javascript">
    //Width and height
    var w = 500;
    var h = 300;
    var padding = 30;


    //Create SVG element
    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h)

      svg.append("rect")
        .attr("width", w)
        .attr("height", h)
        .attr("fill", "yellow");

  </script>
</body>

</html>


标题在这里
保险商实验室{
位置：绝对位置；
}
点击我
测试
//宽度和高度
var w=500；
var h=300；
var=30；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
svg.append（“rect”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“填充”、“黄色”）；

text

是一个

svg

元素，必须包含在

svg

标记中


标题在这里
保险商实验室{
位置：绝对位置；
填充：0；
}
点击我

试验

//宽度和高度
var w=500；
var h=300；
var=30；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
svg.append（“rect”）
.attr（“宽度”，w）
.attr（“高度”，h）
.attr（“填充”、“黄色”）；

谢谢！这很简单：）