librsvg css不匹配后代选择器

时间:2017-06-27 07:00:43

标签: css svg librsvg

我正在尝试使用librsvg来呈现以SVG格式生成的一些图表(一个更大的项目的一部分)。但是,渲染结果与在Web浏览器中打开SVG文件时的外观完全不同。

通过逐位拆开SVG文件,我发现其中一个关键原因是我的CSS样式没有被应用。

这是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>

在网络浏览器中,它看起来像这样: web brower rendering

使用此命令转换为png时:

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

它看起来像这样: lbrsvg rendering

您可以看到填充和描边未应用于路径,因此它显示为黑色矩形。

如果我将CSS更改为:

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

然后它的样式正确。

这里发生了什么?当然librsvg支持CSS后代选择器这样的基本功能吗?我查看了文档,没有提到这样的基本限制。

或者我是否以某种方式仅在浏览器中使用CSS?

我正在使用librsvg 2.39.0。

1 个答案:

答案 0 :(得分:1)

我最终开始研究librsvg源代码。

至少从librsvg 2.41.0开始,后代选择器(以及所有其他类型的组合器)似乎不受支持。

正如@RobertLongson所指出的,Bug #702537涵盖了这一点。