Re: symbolic SVG *not* as an icon?

[Clemens <clemens lab21 org>]

Am Do 26 Jul 2012 18:51:40 CEST schrieb Yaa101:
> Hi Ami,
>
> I do not know too much detail on applying css on st widgets.
> The following is a hunch and probably will not help you, I hope it is
> useful anyway.
>
>
> I do know that SVG is not a picture on which you can do raster
> operations like filling colors, SVG is a collection of commands to
> create a vector, which is then rasterized.
>
> At some point in the library after inputting the SVG, the SVG commands
> are handled to create a rasterized picture in a buffer, this buffer is
> then showed to us.
>
> So maybe you have to be able to insert a command into the svg before it
> gets handled, or maybe able to manipulate the created raster buffer with
> css.
>
> Success!

hi,

A svg file is a simple xml file. the color is stored in a style 
attribute. But believe me, it
is really nasty to manipulate the file and then trigger the render 
action.

Just use 2 svg files with separate css classes like the toggle button
in /usr/share/gnome-shell/theme/gnome-shell.css and
/usr/share/gnome-shell/js/ui/popupMenu.js

e.g.
.my-button {
   background: url('background.svg');
   background-size: contain;
   width:140px; /*(only in pixel)*/
   height:174px;
}

.my-button:checked {
   background: url('background_blue.svg');
   background-size: contain;
   width:140px; /*(only in pixel)*/
   height:174px;
}

and inside the js:
       if (blue)
           this.actor.add_style_pseudo_class('checked');
       else
           this.actor.remove_style_pseudo_class('checked');