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

问题描述

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

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

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

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

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

我该怎么办？

我只希望能够动态编辑.svg的最后一行。还是我必须走另一条路线，例如将icon.svg作为背景，将number.svg放在顶部（两个文件而不是一个文件）？

感谢您的帮助，非常感谢

这是云图标的.svg文件，其中添加了文本“ Test”，我希望能够在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>

解决方法

您实际上不需要在这里反序列化C＃类实例。您的搜索使您找到了听起来像初学者的东西（将对象与XML进行序列化和反序列化），但这在这里完全没有必要。

相反，作为load the SVG as an XML document的粗略概述，

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

可能需要一些调整（目前无法测试代码），但这是一个粗略的主意。

在这样的简单情况下，您不必理会XML（反序列化）或SVG对象模型。

相反，只需将Inkscape中的默认文本设置为PLACEHOLDER（否则您知道的其他任何内容都不会在SVG XML中显示），然后使用简单的字符串替换，即

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

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

c#c#replace replace replace svg svg svg xml-deserialization