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
it looks like this:
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.
