search

newsdev / ai2html

A script for Adobe Illustrator that converts your Illustrator artwork into an html page.
http://ai2html.org
Other
895 stars 143 forks source link

Text as children of a parent group #160

Open Heligraphica opened 1 year ago

Heligraphica commented 1 year ago

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 commented 1 year ago

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.