Moving <text> around within an svg element

garson Published at Dev

garson

I am trying to overlay a element on an SVG graphic. For simplicity's sake, I have recreated it as just a rectangle with a text overlay. I am going to have some pretty serious formatting and styling on the text, but for now I am trying to figure out why I can't get it any lower on the page. I have tried changing the "x" and "y" on the element but it doesn't move at all. Can anyone help? I want to move the text lower in the yellow SVG rectangle.

Here is the full code:

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

<head>
  <meta charset="utf-8" />
  <title>Title Here</title>
  <script data-require="[email protected]" 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>

Weafs.py

text is an svg element and must be enclosed in an svg tag.

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

<head>
  <meta charset="utf-8" />
  <title>Title Here</title>
  <script data-require="[email protected]" 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.