Figuire out a way to work with css and inkscape

[ikbensiep]

Currently the track svg files contain a small <style> element that allows the splitting of the layers.

/* hides all root level .layer group elements */
svg > g.layer { display : none;} 

/* displays only targeted .layer group element */
svg > g.layer:target { display : block;} 

In the game, for every layer we load the svg like: track.svg#layer, ensuring that only the selected layer is displayed.

the problem

Inkscape kind of messes this up. When you show or hide a layer, inkscape adds a style=display: none | display: inline attribute to the xml element.

We can add !important to the css rules, but when you then click the eye icon to display a layer, inkscape will crash. If it does not crash, the file is saved without the style rules.

Net result: after making changes to a track file, you always have to go in and re-add the 2 lines of css.

We can place this css in an external file, and link to it from the svg file but this doesn't solve the problems.

ideally

there would be some way to read the css only when the file is requested through a browser, and have inkscape ignore the layer-flipping css.

[ikbensiep]

one possible solution is to use browser hacks to target Firefox only. According to my limited testing this works:

@supports (-moz-appearance:meterbar) {
    svg > g{ opacity: 0;}
    svg > g:target {opacity: 1;}
}

[ikbensiep]

In PR #38 this is addressed by using a firefox css hack.

In the future this might be nice to move to a stylesheet and reference that instead of setting these lines in every svg file. Fine for now.