Encoding will not allow the SVG 'evenodd' method to work - lost animation/transitioning does not work after encoding

[TheBigApple]

Hi Yoksel,

I'm stuck, I have an Accordion which uses the [+/-] svg as a toggle button.

I've got it working the way I want, but want to remove the HTML's in-line ,
and place it into the CSS, Or at least have it as a <style> in the Header.
[see working good: 1.0 default [current ver - no mod].html]

Placing it in the Header <style> works BUT I loose the animation.
[not working: 2.0 default [in header].html]

Ultimately I really want it in the CSS file, to get it completely out of the HTML.
[not working: 3.0 default [in css main2].html]

It could be that the 'encoding' will not allow the 'evenodd' method to work,
or I have it placed wrong, The animation/transitioning does not work.

The Button's CSS starts at line: 1495

Example DL here: http://msgr.info/In-Line_SVG_to_CSS.zip
152 KB (155,648 bytes)

[Note this 'example' is stripped down from the Original Site to lessen the load, it's a bit dirty-code - the best I could do to make an example]

Thank you for your help!
J.Khan

P.S.: you can delete this request upon response - thnx

---

End

[polarathene]

If you want a higher chance of a response, you should create a minimal reproduction. Your issue content looks like it is missing content, what is this [not working: 3.0 default [in css main2].html]?

Providing a zip link (especially from an untrusted domain) isn't likely to go down as well either. Not sure why you're reacting to your own post either?

---

Chances are your problem is due to the switch to using a data URI compared to inline SVG. It has nothing to do with this project, but that change in usage affects what you can do with SVG.

When it's used as a data uri with an img or background-image for example, it's treated like an image, you lose access to any of the internal content which it seems you want for animating it.