search

svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.01k stars 1.07k forks source link

X and Y positions - allow entry of strings #1188

Closed vvaldersteins closed 3 years ago

vvaldersteins commented 3 years ago

Hi there!

It would be a nice thing if we could specify x and y positions with other values than numbers. For example - %.

Currently if I do something like this -

this.svg.getContainer().text('Hello world').move('50%', '50%');

It doesn't set the x and y to 50%, but instead it resets it to 0. Interesting thing is that, if I check the type for the input variables, then for both - x and y it is NumberAlias, which is Number | number | string, so in theory, I guess this was planned to work with strings as well?

Not sure if this is considered a bug or a feature.

Fuzzyma commented 3 years ago

It does not work and will never work for text. It works for all other shapes that actually have an x attribute, tho. Text is the exception because it is positioned using its baseline. However svg.js unified api positions text by its upper left edge which means it needs to calculate the bbox of the text for doing that. That's why percentage doesn't work there.

However you can use amove instead which will set x and y directly and therefore supports percentages

vvaldersteins commented 3 years ago

Thanks!

I noticed that tspan of text does work with percentage, so I have created a workaround - 

this._text.children()[0].move('20%', '10px');

which works with percentage.

Closing the issue.