SVG 无法显示为图像

Question

我在数据库中有 svg 字符串文件。我想在我的 Asp.Net Core 项目视图中显示它。我将我的数据称为来自控制器的模型。当我尝试这样做时，它会在我的页面上显示为文本。这是我的svg：

这是我在 Index.cshtml 文件中的代码：

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

如何解决这个问题？

更新：

Answer 1

您遇到了命名空间问题。像这样尝试 xml linq

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

我已经解决了问题。我在视图中使用了@Html.Raw(Model.SVG)，现在会显示 SVG 文件。