有没有办法让用户上传 SVG 文件然后渲染 SVG 源?

Is there a way to have the user upload an SVG file but then render the SVG source?

在 DNN 上使用 2sxc,我有一个网站在内容类型中使用 SVG 作为图标。客户希望能够通过 Link 字段将 SVG 图标上传到 2sxc,但他们希望它渲染 SVG 的源代码而不是渲染 <img src="@Content.SVG" />(这样我们就可以操纵填充通过 CSS 上色)。这甚至可能吗?如何实现?

可以在下面找到有关如何执行此操作的一些示例

使用抓取API

旧方法,例如 XMLHttpRequest 或 jQuery

Include SVG files with HTML, and still be able to apply styles to them?

使用 D3

(Embed and) Refer to an external SVG via D3 and/or javascript

使用自定义 JS 库

一个例子:SVGInjector

有趣的是,现在 Dnn 正在这样做,您可以在此处查看代码。如果忽略缓存,则可以在视图中执行类似操作。 https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123

这是从上面调用的,请参阅第 71 行,因此他们真正将文件内容注入到内联中。显然,如果网站流量很大,缓存文件访问内容应该是缓存的优先事项,否则就不需要或至少是次要的。

基本上2步

  1. 使用2sxc和DNN获取真实文件名
  2. 然后使用普通的 .net 东西将文件作为字符串加载 System.IO 并将其添加到您的 html - https://docs.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1

约像这样

<div>
 @Html.Raw(System.IO.File.ReadAllText(fileName)
</div>