You may want to use a SVG filter. I basically a vector-shape graphic language which uses a XML structure. With this you can not only create vector shapes but also modifie different element.
I'm not sure how a SVG file does generate a specific effect(why it wouldn't support the normal invert(), but this one does support).
The xml file i used for this:
<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'invert\'>
<feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/>
</filter>
</svg>
The css + xml url i used:
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");
I know the color isn't excactly the same as the original one, but it is an alternative. Note this is just a 'hack' for firefox, you can just use static filters for other browsers.
More info about this subject:
More info about SVG in Internet Explore
You can't find all effects in the generator, but i might be usefull to see different structure with different effects. You might want to read some basic understanding of XML first :)
Other topic about this matter: What's the CSS Filter alternative for Firefox?