0

我试图用来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>

在网络浏览器中,它看起来像这样: 网页浏览器渲染

当我使用此命令转换为 png 时:

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

它看起来像这样: lbrsvg 渲染

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

如果我将 CSS 更改为:

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

然后它的样式正确。

这里发生了什么?librsvg 肯定支持像 CSS 后代选择器这样基本的东西吗?我查看了文档,发现没有提到这样一个基本限制。

还是我以某种只能在浏览器中使用的方式使用 CSS?

我正在使用 librsvg 2.39.0。

4

1 回答 1

1

我最终开始检查 librsvg 源代码。

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

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

于 2017-07-11T07:08:16.873 回答