我试图用来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
您可以看到填充和描边未应用于路径,因此它显示为黑色矩形。
如果我将 CSS 更改为:
path {
fill: none;
stroke: #00285f;
}
然后它的样式正确。
这里发生了什么?librsvg 肯定支持像 CSS 后代选择器这样基本的东西吗?我查看了文档,发现没有提到这样一个基本限制。
还是我以某种只能在浏览器中使用的方式使用 CSS?
我正在使用 librsvg 2.39.0。