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 as children of a parent group #160

Open
Heligraphica opened this issue Mar 10, 2023 · 1 comment
Open

Text as children of a parent group #160

Heligraphica opened this issue Mar 10, 2023 · 1 comment

Comments

@Heligraphica
Copy link

Hello, sorry if this is not the correct place for this question, I am not sure where to ask.

I have been using ai2html in my work for a little bit and it is a brilliant tool. I was wondering if there was any way to have a text stay in a group, so that the text/label could be the child of said group name. I am hoping to be able to use hover states change the opacity etc, of the text/label.

Here is an example of how I would like it to work.

At the moment I am just hiding the text behind a white box by changing its z-index and turning the opacity of that box to zero to reveal it on hover. I come from more of a design background, so my code knowledge is a bit limited. Any help would be greatly appreciated.

Screenshot 2023-03-10 at 14 56 01

@mbloch
Copy link
Contributor

mbloch commented Mar 10, 2023

Currently, text is all rendered as HTML that overlays graphical elements. If you want the text to be grouped with the bar, the most straightforward way to implement that would be to render both the text and bars as SVG and group them using the SVG <g> element. Using SVG text would cause the labels to scale along with the bars (using the responsiveness: dynamic setting). Would text that scales be a problem for you? Preventing text scaling would be possible but a bit complicated.

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