newsdev / ai2html

A script for Adobe Illustrator that converts your Illustrator artwork into an html page.

Home Page:http://ai2html.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Text as children of a parent group

Heligraphica opened this issue · comments

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

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.