librsvg css not matching descendant selector

346 Views Asked by At

I am trying to use librsvg to render some charts that are produced in SVG format (part of a much larger project). However the rendered result looks quite different to the appearance when the SVG file is opened in a web browser.

By pulling apart the SVG file bit by bit I have identified one of the key reasons is that my CSS styles are not being applied.

Here is an mcve:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" version="1.1">
    <style type="text/css"><![CDATA[

g path {
    fill: none;
    stroke: #00285f;
}
    
    
    ]]></style>
    
    <g class="parent" transform="translate(50,50)">
        <path class="mypath" d="M0,6V0H430V6" />
        <line y2="6" x2="0" />
    </g>
    

</svg>

In a web browser it looks like this: web brower rendering

When I convert to png using this command:

rsvg-convert -f png -o s2.png s2.svg

it looks like this: lbrsvg rendering

You can see the fill and stroke are not applied to the path, so it appears as a black rectangle.

If I change the CSS to:

path {
    fill: none;
    stroke: #00285f;
}

then it is styled correctly.

What's going on here? Surely librsvg supports something as basic as CSS descendant selectors? I have looked through the documentation and found no mention of such a basic limitation.

Or am I using CSS in a way that somehow only works in a browser?

I am using librsvg 2.39.0.

1

There are 1 best solutions below

0
On

I eventually got around to examining the librsvg source.

As of librsvg 2.41.0 at least, descendant selectors (along with all other kinds of combinators) do not appear to be supported.

As pointed out by @RobertLongson, Bug #702537 covers this.