Text alignment differs between 3.0 and 3.1

[johanjeppsson]

I've been trying to align some text with percentage coordinates, but have run into some issues. I've done something like this

  var draw = SVG().addTo("body").size("100%", "100%")

  draw.rect("30%", "100%").fill('#3a3')
  draw.text(function(add) {
      add.tspan("Bold").attr("font-weight", "bold")
      add.tspan("text").newLine()
  }).move("15%", "40%").font({anchor: "middle"})

where I expect the text to be centered in the green rectangle for the x axis. I couldn't get it to work with the latest release, but if I go back to a 3.0 release, I get a behavior more in line with what I expect. 3.1.2 fiddle 3.0.10 fiddle

Am I doing something wrong, or is this a bug?

[Fuzzyma]

In order to position text by it supper left corner, svg.js does some number juggling internally. The older version used even more juggling to make percentage values somehow possible. However, we decided to not do that in 3.1.2. Instead, if you only want to set a literal value for x and y you can use amove which is the same as just setting the values via attr. So just replace move with amove and you are good to go