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:
When I convert to png using this command:
rsvg-convert -f png -o s2.png s2.svg
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.
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.