移动<文本>围绕svg元素

Moving <text> around within an svg element

本文关键字：svg 元素 围绕 文本 lt 移动 gt      更新时间：2023-09-26

我正在尝试在SVG图形上覆盖一个元素。为了简单起见，我将它重新创建为一个带有文本覆盖的矩形。我会对文本进行一些非常严肃的格式化和样式设置，但现在我正在努力弄清楚为什么我不能在页面上降低它。我试着改变元素上的"x"answers"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>

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>

相关文章：