如何成功将 XML 文件反序列化为 C# 对象 (.svg)？

Question

我想向图标添加文本，并在网站上使用该图标，其中显示的图标带有添加的文本。 举个例子：想象一个带有数字的云图标，其中数字是降水概率。 该数字的值会发生变化，因此必须可以动态更改文本。

我使用 Inkscape.org 作为创建.svg文件的绘图程序。 我猜它是一种 XML。 我以为我只是使用 .xml -> C# 对象类（ https://xmltocsharp.azurewebsites.net ）的在线转换器并反序列化它，然后更改一个值并在可能的情况下再次将其序列化到内存中，然后将其用作图像在网页上。 但是在反序列化步骤中出现错误

http://www.w3.org/2000/svg'>不是预期的。

我确实尝试过不同的类模型 - 但没有任何效果。 我不确定我是否正在寻求正确的解决方案。

我希望能够有一个带有文本的可缩放图标，我必须能够更改图标中的文本并将其显示给网站用户。

我该怎么办？

我只想能够动态编辑.svg的最后一行。 或者我是否必须走不同的路线，如icon.svg作为背景和number.svg在顶部（两个文件而不是一个）？

感谢您的帮助，非常感谢

这是带有添加文本“Test”的云图标的.svg文件，我希望能够在 C# 中以不同的字符串更改“Test”：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path clip-rule="evenodd" d="m20.8403 4.4685c-.5663-2.3963-2.6273-4.1744-5.0903-4.1744-2.8995 0-5.25 2.4616-5.25 5.5001 0 .1964.0113.3896.03.5799-.8955.3771-1.53 1.2924-1.53 2.3664 0 1.4097 1.0913 2.5535 2.4375 2.5535h9.3c1.8023 0 3.2625-1.5305 3.2625-3.4179 0-1.8509-1.4063-3.3493-3.1597-3.4076" fill="#e5e5e5" fill-rule="evenodd"/>
  <circle clip-rule="evenodd" cx="15.533335" cy="9.787135" fill="#ffd02f" fill-rule="evenodd" r="6"/>
  <path d="m3.6992 20.6764c-1.7637 0-3.1992-1.4297-3.1992-3.187 0-1.3047.7881-2.4639 2.0088-2.9531l.3496-.1401-.0391-.375c-.0264-.2578-.043-.52-.043-.7856 0-4.103 3.3496-7.4414 7.4678-7.4414 3.4375 0 6.4141 2.3223 7.2402 5.6479l.0918.3672.3779.0117c2.417.0767 4.3105 2.0186 4.3105 4.4209 0 2.4453-1.9971 4.4346-4.4512 4.4346h-14.1141z" fill="#fff"/>
  <path d="m10.2441 6.2941c3.2066 0 5.9842 2.1664 6.7547 5.2684l.1824.7346.7565.0239c2.1459.0677 3.827 1.7899 3.827 3.9207 0 2.1697-1.7726 3.9348-3.9514 3.9348h-14.114c-1.4884-.0001-2.6993-1.2054-2.6993-2.6871 0-1.0995.6649-2.0764 1.694-2.4888l.7005-.2806-.0778-.7506c-.027-.261-.0402-.5011-.0402-.7341 0-3.8274 3.1256-6.9412 6.9676-6.9412m0-1c-4.4004 0-7.9677 3.5543-7.9677 7.9412 0 .2836.0171.5627.0455.8372-1.3589.5446-2.3219 1.8662-2.3219 3.4169 0 2.0353 1.6561 3.687 3.6993 3.687h14.1141c2.7352 0 4.9514-2.2099 4.9514-4.9348 0-2.6729-2.1342-4.8361-4.7954-4.9202-.8595-3.46-3.9873-6.0273-7.7253-6.0273z" fill="#1d1d33"/>
  <path clip-rule="evenodd" d="m18.606967 8.7411167c-.5663-2.3963-2.6273-4.1744-5.0903-4.1744-2.8995 0-5.25 2.4616-5.25 5.5001003 0 .1964.0113.3896.03.5799-.8955.3771-1.53 1.2924-1.53 2.3664 0 1.4097 1.0913 2.5535 2.4374997 2.5535h9.3000003c1.8023 0 3.2625-1.5305 3.2625-3.4179 0-1.8509-1.4063-3.3493003-3.1597-3.4076003" fill="#e5e5e5" fill-rule="evenodd"/>
  <text style="font-weight:bold;font-size:6.62016;font-family:monospace;letter-spacing:0;word-spacing:0;stroke-width:.354651" x="3.696808" y="17.625877">
    <tspan stroke-width=".354651" x="3.696808" y="17.625877">TEST</tspan>
  </text>
</svg>

Answer 1

您在这里并不真正需要反序列化的 C# 类实例。 您的搜索使您找到了一些听起来与初学者相似的东西（将对象序列化和反序列化到 XML 或从 XML 反序列化），但在这里完全没有必要。

相反，作为您可以做什么的粗略概述， 将 SVG 作为 XML 文档加载：

var svg = XDocument.Parse(xmlString);

然后选择要更改的元素：

var tspan = (XText) svg.XPathSelectElement("//*[localName()='tspan']");
// Note: Above way of selecting the tspan is easier to start with
// because you don't have to care about namespaces

并改变：

tspan.Value = "New text";

最后再次保存：

svg.Save(fileName);

可能需要一些调整（现在无法测试代码），但这是一个粗略的想法。

Answer 2

在像这样的简单情况下，您不应该为 XML（反）序列化或 SVG 对象模型而烦恼。

相反，只需将 Inkscape 中的默认文本设置为PLACEHOLDER （或其他任何您知道不会出现在 SVG XML 中的其他内容），并使用简单的字符串替换，即

var svgXml = ReadThatXMLAsAString();
svgXml = svgXml.replace("PLACEHOLDER", "42");
EmitThatXMLToTheUserSomehow(svgXml);

Answer 3

@AKX 非常感谢！

这里的最终代码：

        StreamReader reader = new StreamReader(@"SvgTest.svg");

        var input = reader.ReadToEnd();
        
        //find the text that should be replaced
        input = input.Replace("TEST", "YES");
        reader.Close();
        
        //test -> yes the replace worked TEST->YES
        RtxbxShow.Text = input;

        //now show that svg icon in a picturebox (nuget https://github.com/vvvv/SVG)
        var mySvg = SvgDocument.FromSvg<SvgDocument>(input);
        PicbxShow2.Image = mySvg.Draw(240,240);