在 SvgImageSource 中渲染文本标记

Question

我现在正在使用 UWP 应用程序，我需要从网址转换 SVG 图像。我用新的 Uri 创建了新的 SvgImageSource，但图像渲染不正确。在 SVG 文档中，我有 2 个标记：矩形和文本。矩形正确呈现，但文本无法呈现。有谁知道如何解决这个问题？
C#代码：

public async Task<ImageSource> GetAvatar(string address)
        {
            using(var client = new HttpClient())
            {
                var response = await client.GetAsync(address);
                string content = await response.Content.ReadAsStringAsync();
                if(content.Substring(0, 4).Equals("<svg"))
                {
                    var svg = new SvgImageSource(new Uri(address));
                    return svg;
                }
                return new BitmapImage();
            }
        }

SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect width="100%" height="100%" fill="#FF5722"/>
<text x="50%" y="50%" dy="0.36em" text-anchor="middle" pointer-events="none" fill="#ffffff" font-family="'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'" font-size="125">
M
</text>
</svg>

Answer 1

恐怕 UWP 平台不支持 text svg 元素。请检查SVG Support 文本元素不在支持列表中。目前有一种解决方法是将文本转换为path 元素，它会起作用。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect width="100%" height="100%" fill="#FF5722"/>
<path  d="M 81.055 101.5 L 81.055 17.545 L 53.94 78.59 L 40.31 78.59 L 13.05 17.545 L 13.05 101.5 L 0 101.5 L 0 0 L 19.285 0 L 47.415 64.235 L 75.11 0 L 94.83 0 L 94.83 101.5 L 81.055 101.5 Z" vector-effect="non-scaling-stroke"/>
</svg>

Answer 2

看下面的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;

namespace ConsoleApplication1
{
    class Program
    {
        const string URL = "https://raw.githubusercontent.com/RocketChat/Rocket.Chat.Artwork/master/Logos/logo-dark.svg";
        static void Main(string[] args)
        {
            XDocument doc = XDocument.Load(URL);
            string text = doc.ToString();
            Console.WriteLine(text);
            Console.ReadLine();
        }
    }
}