Your code does not seem to work right on firefox ESR, or Inkscape either so im having a bit hard time deciding what it should look like. IE renders the image as:
Is this correct?
Your code is not valid according to W3C validator.
For starters you need to write svg 1.1 code since that is what you say you are doing. there is no such tag as
def it should be
defs. So you can not use
href atributes in
<use> tags you need to use
xlink:href instead. If you do this you get into illustrator but the thinsg have wrong size (still dont work in inkscape though).
Second, you can not rely on CSS to style all your needs because illustrator won't support all CSS that a browser would. For example neither Firefox does noyt seem to do
letter-spacing and illustrator wont do
Anyway illustrator is not a SVG editor as such, and tends to not work well with handcrafted svg. But the fact that even inkscape 0.92 throws you off means you have serious problems.