如何在不更改 Win2D 中的原始文件的情况下编辑 .svg 文件属性? [英] How to edit .svg file attribute without changing the original file in Win2D?

问题描述

我正在使用 Win2D 开发 UWP 应用程序.我可以在 CanvasControl 中绘制 SVG，但我不知道如何编辑 .svg 文件(xml 格式)的属性?

我的代码:

    private async void DrawSVG(CanvasControl sender, CanvasDrawEventArgs args)
    {
        Uri localUri = new Uri("ms-appx:///Assets/like_icon.svg");

        CanvasSvgDocument svgDocument = null;

        GetImage().Wait();
        async Task GetImage()
        {
            await Task.Run(async () =>
            {
                var file = await StorageFile.GetFileFromApplicationUriAsync(localUri);
                IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
                svgDocument = await CanvasSvgDocument.LoadAsync(sender, stream);

            }).ConfigureAwait(false);
        }
        args.DrawingSession.DrawSvg(svgDocument, new Size(500, 500));
    }

like_icon.svg

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17" viewBox="0 0 18 17">
  <g fill="none" fill-rule="evenodd" transform="translate(.492 .27)">
    <path fill="#000000" d="M16.8477376,7.20815969 C16.8477376,6.35482636 16.1544043,5.66149302 15.3028487,5.66149302 L11.7526265,5.61171525 L12.0797376,2.99304858 C12.0797376,2.10949302 11.5001821,0.824159691 10.5899598,0.824159691 L9.62107095,0.824159691 L9.12684872,3.46060414 L6.8886265,6.9272708 C6.65040428,7.25971525 6.48151539,7.53704858 6.35884872,7.78593747 C6.15084872,7.55660414 5.8486265,7.41082636 5.5126265,7.41082636 L1.9926265,7.41082636 C1.36151539,7.41082636 0.847737612,7.92282636 0.847737612,8.55393747 L0.847737612,13.9797152 C0.847737612,14.6108264 1.36151539,15.1246041 1.9926265,15.1246041 L5.5126265,15.1246041 C5.9766265,15.1246041 6.3766265,14.845493 6.55618206,14.4490486 C6.89751539,14.8117152 7.38107095,15.0410486 7.91973761,15.0410486 L13.7437376,15.0410486 C14.5952932,15.0410486 15.2886265,14.3477152 15.2886265,13.4961597 C15.2886265,13.3023819 15.2548487,13.117493 15.1855154,12.941493 C15.8432932,12.7548264 16.3108487,12.1468264 16.3108487,11.453493 C16.3108487,11.2117152 16.2521821,10.9717152 16.1419598,10.7566041 C16.5792932,10.4703819 16.8477376,9.9832708 16.8477376,9.46060414 C16.8477376,9.03038191 16.6699598,8.62504858 16.3570709,8.3352708 C16.6699598,8.04371525 16.8477376,7.63838191 16.8477376,7.20815969 Z"/>
    <path fill="#FFFFFF" fill-rule="nonzero" d="M12.5758817,3.05502449 L12.5797376,2.99304858 C12.5797376,1.71035442 11.7493049,0.324159691 10.5899598,0.324159691 L9.20609061,0.324159691 L8.65350851,3.27192682 L6.46857,6.65606509 C6.36891464,6.79470655 6.27802307,6.92907635 6.19575641,7.0594942 C5.98490385,6.96298269 5.75270082,6.91082636 5.5126265,6.91082636 L1.9926265,6.91082636 C1.08527398,6.91082636 0.347737612,7.64678172 0.347737612,8.55393747 L0.347737612,13.9797152 C0.347737612,14.8869687 1.08537301,15.6246041 1.9926265,15.6246041 L5.5126265,15.6246041 C5.94542749,15.6246041 6.34800042,15.4544786 6.64702124,15.1691882 C7.02157239,15.4085728 7.46024807,15.5410486 7.91973761,15.5410486 L13.7437376,15.5410486 C14.8714355,15.5410486 15.7886265,14.6238576 15.7886265,13.4961597 C15.7886265,13.4075077 15.7831854,13.3200468 15.7722711,13.2338957 C16.4007963,12.8765926 16.8108487,12.2009061 16.8108487,11.453493 C16.8108487,11.2714304 16.7859185,11.090129 16.737515,10.9150293 C17.1230885,10.5338146 17.3477376,10.011585 17.3477376,9.46060414 C17.3477376,9.05510266 17.2281107,8.66486371 17.0086874,8.33470398 C17.2281277,8.00387435 17.3477376,7.61363299 17.3477376,7.20815969 C17.3477376,6.07904816 16.4309107,5.16149302 15.3028487,5.16149302 L12.3179849,5.11960075 L12.5758817,3.05502449 Z M10.5899598,1.32415969 C11.0548864,1.32415969 11.5671284,2.16978607 11.5795087,2.96377345 L11.1872671,6.10383747 L15.2958389,6.16144388 C15.8784481,6.16149302 16.3477376,6.63115526 16.3477376,7.20815969 C16.3477376,7.49835728 16.2285488,7.77160392 16.0162081,7.96946682 L15.6224358,8.33639106 L16.0173254,8.70211265 C16.2286683,8.89784505 16.3477376,9.17050104 16.3477376,9.46060414 C16.3477376,9.81164448 16.166826,10.1427655 15.8681519,10.3382392 L15.4919378,10.5844607 L15.6969746,10.9846131 C15.7715125,11.1300824 15.8108487,11.2920369 15.8108487,11.453493 C15.8108487,11.9190842 15.4957464,12.333711 15.0490135,12.4604865 L14.5179941,12.6111812 L14.7203112,13.1247553 C14.7659401,13.2405825 14.7886265,13.363148 14.7886265,13.4961597 C14.7886265,14.0715729 14.3191508,14.5410486 13.7437376,14.5410486 L7.91973761,14.5410486 C7.53698999,14.5410486 7.17998941,14.3823053 6.92028205,14.1063662 L6.4086865,13.562796 L6.10071945,14.2427628 C5.99653164,14.4728012 5.76698985,14.6246041 5.5126265,14.6246041 L1.9926265,14.6246041 C1.63765776,14.6246041 1.34773761,14.334684 1.34773761,13.9797152 L1.34773761,8.55393747 C1.34773761,8.19954742 1.63707892,7.91082636 1.9926265,7.91082636 L5.5126265,7.91082636 C5.69634128,7.91082636 5.86751631,7.98846457 5.98848921,8.12184494 L6.48235393,8.66636246 L6.80733637,8.00697781 C6.92034857,7.7776777 7.07772278,7.52179443 7.29505221,7.21850634 L9.54690522,3.73180985 L9.60018894,3.64928145 L10.0360513,1.32415969 L10.5899598,1.32415969 Z"/>
  </g>
</svg>

在这个 .svg 中，我想在运行时更改 path 元素下的 fill 属性.它在原始 .svg 文件中为黑色，我想根据运行时的条件更改颜色.

In this .svg I want to change the fill attribute under path element on runtime. It is black in color in the original .svg file and I want to change the color based on my condition on runtime.

注意:我不想编辑和保存 .svg 文件，我只想编辑流对象.如何做到这一点?

推荐答案

基于 文档 CanvasSvgDocument，我们注意到 CanvasSvgDocument 有 LoadElementAsync 属性，它可以从包含 XML 片段的流中加载 SVG 元素.所以我们可以用它来获取svg文件的结构.然后找到我们要改变的路径元素，调用SetStringAttribute方法改变fill属性的颜色.最后，我们将根元素分配给 CanvasSvgDocument.例如:

Based on the document of CanvasSvgDocument, we noticed CanvasSvgDocument has LoadElementAsync property, it can load an SVG element from a stream containing an XML fragment. So we can use it to get the structure of svg file. Then find the path element we want to change and call the SetStringAttribute method to change the color of fill property. At last, we assign the root element to CanvasSvgDocument. For example:

private void CanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    Uri localUri = new Uri("ms-appx:///Assets/like_icon.svg");

    CanvasSvgDocument svgDocument = null;

    GetImage().Wait();
    async Task GetImage()
    {
        await Task.Run(async () =>
        {    
            var file = await StorageFile.GetFileFromApplicationUriAsync(localUri);
            IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);

            svgDocument = new CanvasSvgDocument(sender);
            CanvasSvgNamedElement element = await svgDocument.LoadElementAsync(stream);
                
            CanvasSvgNamedElement gChild = element.FirstChild as CanvasSvgNamedElement;
            CanvasSvgNamedElement BlackPath = gChild.FirstChild as CanvasSvgNamedElement;
            BlackPath.SetStringAttribute("fill", "#DC143C");
            svgDocument.Root.AppendChild(element);

        }).ConfigureAwait(false);
    }

    args.DrawingSession.DrawSvg(svgDocument, new Size(500, 500));
}

这篇关于如何在不更改 Win2D 中的原始文件的情况下编辑 .svg 文件属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！