Illustrator css class for layers (or shapes)

[Andreas.O]

Hey,

Just started trying out Illustrator for a small project Im playing around with. First impression is really good and so far I prefer it over Inkscape, but I have a small issue that sadly enough is abit of a "deal breaker".

Hopefully its just a knowledge gap on my side and something that can be fixed by the nice experts here!

My Goal:

What I want is to be able to assign css-classes to layers (or shapes/objects) in Illustrator, then Ill use the css-class to toggle it on/off on a website. I cant do much about how the website works, only use the "tools" provided by it.

My goal was to hide the object in "layer1". (spoiler, try number 2 works! But requires manual editing of the svg via texteditors)

First try:

Two issues here:

First the automated class name(st0/st1), it makes it troublesome when I have several "groups" that I want to toggle on/off. 

Second, if I use class="st1" the opacity setting stops working, so it hides what ever it overlaps witch sort of defeats the purpose.

First test, didnt work.

Second try:

Works, but what I have to do is manually enter "class="layerTest"" after id="layer1".

Its ok, but I have alot of these to do... 

It would be sweet to be able to assign a class to layers inside of Illustrator since it seems to be a working solution.

Second test, works!

Third try:

So close, yet so far!

I tried using a custom Graphic Format, then saving it as SVG with the css-properties under advance set to Format Element (might be translating it wrong, its the option furthest down in the list).

This generates a class that I can pick myself, but once again the opacity stops working...

Third test, didnt work.

Does anyone know if there is a solution for this?

I tried experimenting with "save as SVG" and options, aswell as "export as SVG" but "save as" as mentioned above seems to be the closest I could get.

I could probably make a small script that searches the svg for "id="layer*"" and adds "class="layer*""  but I would love to have a complete solution within Illustrator for simplicity.

[lancen64685283]

I need something similar to this. Where the polygon element class name takes the parent 'g' id name or at the very least added to it.

[happie_97]

This article might help you. I know that Illustrator sets the CSS by how you name your layers. This is an article I give to my students. It might help you.

This is an excerpt from this article. It goes into a little more information on the website.

"Illustrator will export layers as groups for an SVG file and will use the name as the ID of the group. These IDs can then be easily selected and manipulated using JavaScript or CSS, just as any other object on a web page."

[Andreas.O]

Hey, its true that Illustrator names the ID after the layers and this "solves" the problem if you have single objects that you want to manipulate.

but its another situation if you want to handle groups of objects simultanious.

in my case I have groups of 2-10 Objects that I want to manipulate.

Im working in a third party system that targets classes so IDs doesnt work unfortunatly.

my "work around" is so far to complete the svg in Illustrator then open it with nodepad++ and ads the same Class I want.

it works but is abit tedious.

i