Блог

Я хочу добавить текст к значку и использовать этот значок на веб-сайте, где значок отображается с добавленным текстом внутри. В качестве примера: представьте значок облака с цифрой в нем, где число — это вероятность выпадения осадков. Значение этого числа изменяется, поэтому должна быть возможность динамического изменения текста.

Я использую Inkscape.org как программа для рисования, которая создает .svg файл. Я думаю, это что-то вроде XML. Я думал, что просто использую онлайн-конвертер из .xml -> Классы объектов C # (https://xmltocsharp.azurewebsites.net ) и десериализовать его, затем измените одно значение и сериализуйте его снова, если это возможно, в памяти, а затем используйте это как изображение на веб-странице. Но я получаю ошибку на этапе десериализации

» rel=»nofollow noreferrer»>http://www.w3.org/2000/svg ‘> не ожидалось.

Я пробовал разные модели классов — но ничего не сработало. Я не уверен, что ищу правильное решение.

Я хочу иметь масштабируемый значок с текстом в нем, и я должен иметь возможность изменять текст в значке и показывать его пользователям веб-сайта.

Что мне делать?

Я просто хочу иметь возможность редактировать последнюю строку .svg динамически. Или мне нужно пойти другим путем, например, icon.svg в качестве фона и number.svg сверху (два файла вместо одного)?

Спасибо за вашу помощь, мы очень ценим

Вот .svg файл значка облака с добавленным текстом «Test», я хотел бы иметь возможность изменить «Test» в другой строке на C#:

 <?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), но здесь это совершенно не нужно.

Вместо этого, в качестве приблизительного описания того, что вы могли бы сделать, загрузите 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);
  

Возможно, потребуется некоторая настройка (не могу протестировать код прямо сейчас), но это приблизительная идея.

Вам не следует беспокоиться о 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);