SVG 无法显示为图像

Question

I've got svg string file on database. I want to show it on my Asp.Net Core projects view. I'm calling my data as Model from controller. When I'm trying to do it, it displays as text on my page. Here is my svg:

And here is my code on Index.cshtml file:

    @foreach (var item in Model)
                {
                    <div>
                        <div>
                            <div id="svg-@item.ID"></div>
                            <script>
                                debugger;
                                var newSvg = '@item.SVG';
                                var svg = document.getElementById('svg-' + '@item.ID');
                                svg.append(newSvg);
                            </script>
                        </div>
                    </div>
                }






<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 2250 1950">
  <g>
    <g fill="#aaffff" stroke="black" stroke-width="4">
      <path id="glass" d="M892.5 293 L343 293 L343 1457 L892.5 1457z"/>
      <path id="glass" d="M983.5 1407 L1707 1407 L1707 343 L983.5 343z"/>
    </g>
    <g stroke="black">
      <g name="ProfileGroup0-profileundefined" stroke-width="3" fill="#ffffff">
        <path d="M300 250 L300 1500 L343 1457 L343 293z"/>
        <path d="M300 1500 L1800 1500 L1757 1457 L343 1457z"/>
        <path d="M1800 1500 L1800 250 L1757 293 L1757 1457z"/>
        <path d="M1800 250 L300 250 L343 293 L1757 293z"/>
        <path d="M892.5 293 L892.5 1457 L933.5 1457 L933.5 293z" name="ProfileGroup0-profileundefinedVerticalCentervertical-center-profile0"/>
      </g>
      <g name="ProfileGroup0-profileundefinedSash0-sash-profile0" stroke-width="3" fill="#ffffff">
        <path d="M925.5 1465 L1765 1465 L1707 1407 L983.5 1407z"/>
        <path d="M1765 1465 L1765 285 L1707 343 L1707 1407z"/>
        <path d="M1765 285 L925.5 285 L983.5 343 L1707 343z"/>
        <path d="M925.5 285 L925.5 1465 L983.5 1407 L983.5 343z"/>
      </g>
      <path d="M166.53439331054688 250 L166.53439331054688 803.1251507979999 M166.53439331054688 946.874849202 L166.53439331054688 1500 M150.97193854994686 1463.6876055586 L166.53439331054688 1500 L182.0968480711469 1463.6876055586 M150.97193854994686 286.31239444140004 L166.53439331054688 250 L182.0968480711469 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="57.08134549943752" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
      <path d="M300 1663.7496984040001 L914.6095275878906 1663.7496984040001 M1185.3904724121094 1663.7496984040001 L1800 1663.7496984040001 M1763.6876055586 1679.3121531646002 L1800 1663.7496984040001 L1763.6876055586 1648.1872436434 M336.31239444140004 1679.3121531646002 L300 1663.7496984040001 L336.31239444140004 1648.1872436434z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="940.5469521888906" y="1695.6245476060003" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
      <path d="M1933.4656066894531 250 L1933.4656066894531 803.1251507979999 M1933.4656066894531 946.874849202 L1933.4656066894531 1500 M1917.9031519288533 1463.6876055586 L1933.4656066894531 1500 L1949.028061450053 1463.6876055586 M1917.9031519288533 286.31239444140004 L1933.4656066894531 250 L1949.028061450053 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="1824.0125588783437" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
      <path d="M300 86.25030159599993 L914.6095275878906 86.25030159599993 M1185.3904724121094 86.25030159599993 L1800 86.25030159599993 M1763.6876055586 101.81275635659995 L1800 86.25030159599993 L1763.6876055586 70.68784683539991 M336.31239444140004 101.81275635659995 L300 86.25030159599993 L336.31239444140004 70.68784683539991z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="940.5469521888906" y="118.12515079799995" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
      <path d="M300 158.12515079799994 L499.95714569091797 158.12515079799994 M713.042854309082 158.12515079799994 L913 158.12515079799994 M876.6876055585999 173.68760555859996 L913 158.12515079799994 L876.6876055585999 142.56269603739992 M336.31239444140004 173.68760555859996 L300 158.12515079799994 L336.31239444140004 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="525.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">613</text>
      <path d="M913 158.12515079799994 L1249.957145690918 158.12515079799994 M1463.042854309082 158.12515079799994 L1800 158.12515079799994 M1763.6876055586 173.68760555859996 L1800 158.12515079799994 L1763.6876055586 142.56269603739992 M949.3123944414001 173.68760555859996 L913 158.12515079799994 L949.3123944414001 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
      <text x="1275.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">887</text>
    </g>
    <g>
      <line x1="1707" y1="343" x2="983.5" y2="875" stroke="black"/>
      <line x1="983.5" y1="875" x2="1707" y2="1407" stroke="black"/>
      <image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902220355008321.png" width="28" height="140" x="-967.5" y="845" transform="scale(-1,1) rotate(0,-954.5,875)"/>
      <g>
        <image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-1387" transform="scale(1,-1) rotate(-180,1757,-1357)"/>
        <image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-899.5" transform="scale(1,-1) rotate(-180,1757,-869.5)"/>
        <image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-412" transform="scale(1,-1) rotate(-180,1757,-382)"/>
      </g>
    </g>
  </g>
</svg> 

How can fix this?

UPDATE:

Answer 1

You have a namespace issue. Try xml linq like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;
using System.IO;
namespace ConsoleApplication1
{
    class Program
    {
        const string FILENAME = @"c:\temp\test.xml";
        static void Main(string[] args)
        {
            string xml = File.ReadAllText(FILENAME);
            XDocument doc = XDocument.Parse(xml);

            //use following from a filename
            //XDocument doc = XDocument.Load(FILENAME);

            List<XElement> svgs = doc.Descendants().Where(x => x.Name.LocalName == "svg").ToList();
            foreach (XElement svg in svgs)
            {
                //you may need to encode
                //string encodedXml = System.Net.WebUtility.HtmlEncode(svg.ToString());
                //Console.WriteLine(encodedXml);

                Console.WriteLine(svg.ToString());
            }
            Console.ReadLine();
        }
    }
 
}

Answer 2

I've solved problem. I used @Html.Raw(Model.SVG) on view, SVG files are now displayed.