> Hi all, > I've got a .svg file that I'm using as a background of a St.Button via: > .my-button { > background: url('background.svg'); > }
I think you need to rewrite it: .my-button { background: url('background.svg'); background-size: contain; width:140px; /*(only in pixel)*/ height:174px; } > The SVG has some white bits in it. What I'd like is to be able to do: > .my-button:toggled { > color: blue; > } you need to re-design that svg, or just change to a svg that is blue. > And when I apply the 'toggled' style to the button, I'd like the white > bit of the SVG to turn blue. Like symbolic icons in the status area. > How do I do this? I instantiate the button via: > button = new St.Button({ style_class: 'my-button'}); > which applies the background image. However, using `color:blue;` > doesn't turn the white bit blue. > Do I need to: > - somehow modify the SVG to make it know which colour should be changed > - do something else on the code side to say "this is a symbolic SVG" > (do I set it as an icon or something instead of putting it in the CSS > background property? Wasn't there some problem on this list a while > ago with not being able to set symbolic icons that are local?) > If it helps, the SVG is close-window.svg (the close button on windows > in the overview), but I modified it in Inkscape to remove the 'X' (and > I am drawing the symbol in by setting my St.Button's label property). > The white border around it is what I want to change colour. > cheers! _______________________________________________ gnome-shell-list mailing list gnome-shell-list@gnome.org https://mail.gnome.org/mailman/listinfo/gnome-shell-list