search

anseki / leader-line

Draw a leader line in your web page.
http://anseki.github.io/leader-line/
MIT License
3.03k stars 424 forks source link

How to place pathLabel directly on the middle of a line? #366

Closed eukuz closed 2 years ago

eukuz commented 2 years ago

Dear @anseki, thank you for the library!

It's needed to place a pathlabel in the middle of a leader-line path both horizontally and vertically. So the line goes through the text and direction matters image

Your answer to the #334 issue was close, but js animation cannot be applied here due to the performance reasons I also played with the dominant-baseline css proprerty for textPath tag but it did't give me desired result - the label wasn't placed in the middle on a path neither horizontally nor vertically

How can it be done?

anseki commented 2 years ago

Hi @eukuz, thank you for the comment. Could you explain that the dominant-baseline property didn't work? BTW, the https://github.com/anseki/leader-line/issues/334 didn't use JS animation.

eukuz commented 2 years ago

The pathLabel property of the leader line generates a <textPath> tag. I tried to apply the CSS property dominant-baseline to the tag for placing the text just in the center or a line path

eukuz commented 2 years ago

Speaking of #344 and JS animation I meant this your comment and jsfiddle example

eukuz commented 2 years ago

So I need the pathLabel to be like strikethrough with the leader line path image

anseki commented 2 years ago

Could you explain that the dominant-baseline property didn't work? Do you mean that the property didn't change it at all? The https://github.com/anseki/leader-line/issues/344 (not 334) is a topic about "Socket position". And the JSFiddle example in the https://github.com/anseki/leader-line/issues/334 didn't use JS animation. Maybe you mistook a animateMotion element of SVG to move an element. It is not JS animation, and it doesn't animate.

eukuz commented 2 years ago

Yes, you're right animateMotion. dominant-baseline property placed with value : "middle" didn't placed the pathLable to the middle. dominant-baseline property placed with value : "hanging" placed the pathLable closer to middle, but not exactly

anseki commented 2 years ago

I see. Try this: https://jsfiddle.net/m12hc8sx/ You might have to consider compatibility with browsers. And note that this is not supported by the library.

eukuz commented 2 years ago

Thank you :)

anseki commented 2 years ago

:smile: