首页 > 解决方案 > 如何成功将 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#svgreplacexml-deserialization

解决方案


您在这里并不需要反序列化的 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);

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


推荐阅读