有没有办法让用户上传 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步
- 使用2sxc和DNN获取真实文件名
- 然后使用普通的 .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>
在 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步
- 使用2sxc和DNN获取真实文件名
- 然后使用普通的 .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>