如何将 SVG 图像渲染为单色位图图像？

Question

使用SVG.NET NuGet 包将 SVG 图像渲染为 .NET 中的位图图像，我试图在渲染期间更改图像的颜色。

例如我有这个源 SVG 图像：

并想要渲染它，例如作为绿色位图图像：

（在我的场景中，所有源 SVG 图像都是单色的）。

我当前的不成功代码如下所示：

var svgDoc = SvgDocument.Open<SvgDocument>(svgFilePath, null);

// Tried several things, all without any changes in the resulting bitmap:
svgDoc.Color = new SvgColourServer(Color.DarkGreen);
svgDoc.StopColor = new SvgColourServer(Color.DarkGreen);
svgDoc.Stroke = new SvgColourServer(Color.DarkGreen);
svgDoc.Fill = new SvgColourServer(Color.DarkGreen);

var bitmap = svgDoc.Draw();

我也检查了源代码并查看了它，但我仍然没有找到改变颜色的方法。

我的问题：

如何在使用 SVG.NET 将 SVG 图像渲染为位图图像期间更改颜色？

（我在 SO 上询问，而不仅仅是在他们的 GitHub 页面上，因为作者似乎根本不回复 questions 或很少回复）

更新 1：

起作用的是以下片段：

var svgDoc = SvgDocument.Open<SvgDocument>(svgFilePath, null);

// Recursively change all nodes.
processNodes(svgDoc.Descendants(), new SvgColourServer(Color.DarkGreen));

var bitmap = svgDoc.Draw();

连同这个功能：

private void processNodes(
    IEnumerable<SvgElement> nodes, SvgPaintServer colorServer)
{
    foreach (var node in nodes)
    {
        if (node.Fill != SvgPaintServer.None) node.Fill = colorServer;
        if (node.Color != SvgPaintServer.None) node.Color = colorServer;
        if (node.StopColor != SvgPaintServer.None) node.StopColor = colorServer;
        if (node.Stroke != SvgPaintServer.None) node.Stroke = colorServer;

        processNodes(node.Descendants(), colorServer);
    }
}

虽然我不确定所有节点的这种递归迭代的成本以及是否有更快的方法。

Answer 1

您的第一次尝试失败听起来很合理，因为您仅在父 <svg> 元素上设置了 fill 和 stroke，并且父元素的填充/描边不会覆盖子元素的填充/描边。示例：

<svg fill="green" stroke="green" xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
    <g stroke="black" stroke-width="2" fill="none" >
        <path d="M90,90 v-80 a80,80 0 0,0 -80,80 z" fill="red" />
        <path d="M100,100 h-80 a80,80 0 1,0 80,-80 z" fill="gold" />
    </g>
</svg>

更新方法的另一种方法是通过 CSS 设置填充/描边，因为 CSS 将覆盖任何 fill 和 stroke 属性。因此，如果 SVG.NET 允许您在 SVG 中插入/编辑 <style> 元素，您可以这样做：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
    <style>
        * {
            fill: green;
            stroke: green;
        }
    </style>
    <g stroke="black" stroke-width="2" fill="none" >
        <path d="M90,90 v-80 a80,80 0 0,0 -80,80 z" fill="red" />
        <path d="M100,100 h-80 a80,80 0 1,0 80,-80 z" fill="gold" />
    </g>
</svg>