javascript - 在 `data:` URI 中转义 SVG 的正确方法？

Question

Chrome 最近启动了 blocking URLs with new line and < characters .

我维护的一个应用程序严重依赖数据 URI ( data:image/svg+xml;utf8,<svg>......) 中的 SVG 图像。使用 data: 的原因URI 而不是传统的图像或 SVG 标签是在运行时从更大的 JSON 文档中的 SVG 属性加载 SVG。

是否可以在 data: 中使用 SVG？ Chrome 60 中发生此更改后的 URL？如果没有，我有什么选择？

更新:用户 Álvaro González 建议使用 encodeURIComponent这确实使弃用警告消失了。

Answer 1

数据 URI 仍然是 URI，所以 encodeURIComponent()应该是正确的工具:

The encodeURIComponent() function encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

不要忘记将其应用于图像数据，而不是整个 URI。

如果 URI 在 CSS 中使用，这就是您所需要的。如果您想在 HTML 中注入(inject)它，您还应该在此之上应用 HTML 编码(这次是完整的 URI)。