Imported SVG path elements - always black fill
I am using the latest version of AI (early 2019).
I notice that SVG path elements often lose their fill color. (They are always black.)
Have not been able to pin down the exact circumstances where this fails, but I am attaching a bare bones file which exhibits the issue clearly.
This file displays perfectly in (e.g.) chrome. There's a red and a green filled path.
But when importing the SVG to AI, the 'red' path loses its fill and becomes black. The green fill is honored on input. I can't see any meaningful difference between the way the fill is described. The two paths are congruent.
Note: The file was originated in AI. The 'red' fill CSS rule was added manually in a text editor after export. I believe it is well-formed SVG code.
You can swap the class attributes between the two paths (in a text editor) and it will fail to import the fill for the other path.
If you change the classname from "aha_red" to "st1" (both in the style element and in the class attribute for the path) it works fine.
Can it be that AI is fussy about classnames 'not originated here'?
No problem with polygon, rect, circle etc. Only path elements!
And (BTW, GRR!) this webform wont accept SVG files. Had to rename it to .txt.
Brennan Young
shared this idea
-
Brennan Young
commented
More info on this issue.
It seems to be because the class name I added manually has an underscore in it. I can confirm that Illustrator imports the fill correctly if I remove the underscore from the class name.
A possibly duplicate issue was reported by Gust van de Wal in November 2018 under the title "Underscores in SVG id attributes won't get their CSS styles applied". That issue refers only to Ids, but apparently this is a more general problem with CSS identifiers not being handled properly.