I’ve used 2 strategies so far in Royale: 1. Subclasses ImageButton and se the src property to an SVG image. This in really only good for buttons which have an image *inside* the button. 2. Subclass Group and set :hover, :active, etc. using background-image to set the background of the div to the image which could be SVG.
Harbs > On Mar 3, 2018, at 8:47 PM, Carlos Rovira <[email protected]> wrote: > > > Hi, > > I was this days playing with SVG to skin a button. My target was to try to > get a complete theme that could be skinned only with SVG. > > After playing with Button, I don't see an easy way to make a button works ok > with SVG. I think the way to do this it with "border-image" property in order > to have some kind of 9-slice scaling, but this property seems not to work ok > in all browser (let me know if I'm wrong) [1] > > So for Button I ended using CSS3 properties. In the case of buttons, I must > to say that this seems to target almost 95% of what people expect. And using > software like Sketch I think that get to the final CSS 3 code is in some way > "quick". > > For square graphics like radios or checkboxes maybe SVG will fit more easily. > I'll let you know as I get to that. > > btw, although I'm uploading some styles, don't take the current work as > final. It should change a lot as I get more components and rework all as I > get more experience I the complete set. In the end, I have to make a refactor > to "Jewel", and the current theme is called blue but I uploaded a orange > button ;), I'm getting some experience on what can I do and what not :) > > For example this is a first render of the current button, just for fun :) > > > > > [1] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image > <https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image> > > -- > Carlos Rovira > http://about.me/carlosrovira <http://about.me/carlosrovira> >
