Question

我正在尝试在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>

Answer 1

text是svg元素，必须附在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;
      padding: 0;
    }
  </style>
</head>

<body>
  <p>Click me</p>
  <ul>
    <svg width="500" height="300" viewBox="0 0 500 300">
      <text x="40" y="270">Test</text>
    </svg>
  </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>

在svg元素

1 个答案: