Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text alignment differs between 3.0 and 3.1 #1302

Closed
johanjeppsson opened this issue Jun 8, 2023 · 1 comment
Closed

Text alignment differs between 3.0 and 3.1 #1302

johanjeppsson opened this issue Jun 8, 2023 · 1 comment

Comments

@johanjeppsson
Copy link

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
Screenshot 2023-06-08 20 33 39
3.0.10 fiddle
Screenshot 2023-06-08 20 40 47

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

@Fuzzyma
Copy link
Member

Fuzzyma commented Jun 11, 2023

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

@Fuzzyma Fuzzyma closed this as completed Jun 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants