V databázi mám soubor svg string. Chci to ukázat na mém pohledu na projekty Asp.Net Core. Volám svá data jako model z ovladače. Když se o to pokouším, zobrazí se to jako text na mé stránce. Zde je můj svg:
A zde je můj kód v souboru Index.cshtml:
@foreach (var item in Model)
{
<div>
<div>
<div id="[email protected]"></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>
Jak to lze opravit?
AKTUALIZACE:
Odpověď
Problém jsem vyřešil. Použil jsem @Html.Raw(Model.SVG) při zobrazení jsou nyní zobrazeny soubory SVG.