Search code examples
jquerycsssvgcss-selectorsjquery-svg

CSS with [attribute="value"] rules not applying to jquery-svg image

I've got an inkscape SVG file loaded in with jquery-svg, which I'm trying to apply a bunch of CSS selectors to in order to ensure that items of particular layers are all of uniform colour, and to allow for mouseover effects on certain layers. It seems to have no issues respecting standard CSS rules on the SVG, but completely ignores anything with a [attribute="value"] selector, for example:

svg g path:hover {
    fill: yellow !important;
    stroke-width: 4px !important;
}

Will apply these effects when on mouseover, as expected, however:

svg g[inkscape\:label="footprint"] * {
    fill: white !important;
    pointer-events: none;
}

Completely ignores this, resulting in the :hover events still applying to them. I also have a CSS style set up to apply rules to a legend div and the SVG, as follows:

svg g[inkscape\:label="social"] *,
div#legend div.legendEntry[name="social"] div.legendColor {
    fill: orange !important;
    background-color: orange;
}

which will match the div#legend div.legendEntry[name="social"] div.legendColor without an issue, however doesn't seem to apply to the svg g[inkscape\:label="social"] * selector.

I'm assuming this is something to do with jquery-svg or jQuery changing the DOM after the page has loaded - though this wasn't an issue when I loaded the SVG data into the page directly, without jquery-svg. I can apply styles directly though jquery-svg, however it would be nicer to be able to tell it to apply existing styles after it's loaded an SVG file.

Solution

  • SVG is an XML-based format, and as such, inkscape:label is not an inkscape:label attribute with a colon as part of its name, but a label attribute in the inkscape XML namespace.

    Most likely, the SVG is being loaded as XML, which means rather than treating the colon as a literal part of the attribute name, you need to declare and reference the XML namespace properly in your selectors. You do this with a @namespace statement at the top of your stylesheet:

    @namespace inkscape 'http://www.inkscape.org/namespaces/inkscape';

    And instead of [inkscape\:label="..."], use [inkscape|label="..."], with a pipe rather than an escaped colon to indicate a namespace prefix:

    svg g[inkscape|label="footprint"] * {
    fill: white !important;
    pointer-events: none;
}

svg g[inkscape|label="social"] *,
div#legend div.legendEntry[name="social"] div.legendColor {
    fill: orange !important;
    background-color: orange;
}