代码之家  ›  专栏  ›  技术社区  ›  Uwe Keim Chand

如何将SVG图像渲染成单色位图图像?

  •  0
  • Uwe Keim Chand  · 技术社区  · 6 年前

    使用 SVG.NET 要在.NET中将SVG图像渲染为位图图像,我正在尝试在渲染期间更改图像的颜色。

    E、 g.我有这个源SVG图像:

    enter image description here

    enter image description here

    (在我的场景中,所有源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图像渲染为位图图像时更改颜色?

    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);
        }
    }
    

    1 回复  |  直到 6 年前
        1
  •  1
  •   Sphinxxx    6 年前

    听起来你的第一次尝试失败是合理的,因为你只是 fill stroke 在父母身上 <svg> 元素,父级的填充/笔划不会覆盖子级的填充/笔划。例子:

    <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将覆盖任何 填满 属性。所以,如果 SVG.NET网站 允许您插入/编辑 <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>