如何从 Web 服务动态导入 SVG 并内联渲染

Posted 2023-03-13

【中文标题】如何从 Web 服务动态导入 SVG 并内联渲染

【英文标题】：How to dynamically import SVG from a web service and render it inline

【发布时间】：2021-12-09 12:08:52

【问题描述】：

我们有数百个 SVG 文件，我正在尝试内联渲染。我正在使用已经安装和配置了 @svgr/webpack 的 create-react-app。它允许我像这样添加 SVG 内联：

import  ReactComponent as SvgImage  from '../Plans/Brownlow-Floor-Plan.svg';
...

<SvgImage style= width: "600px !important"  />

Similar question 提供了一种内联动态渲染 SVG 的解决方案。但是，在 my 的情况下，我的源代码中没有任何 SVG 文件。相反，所有 SVG 文件都通过调用 API 服务返回给我。例如：

http://myservice/api/getplan(100) http://myservice/api/getplan(103) http://myservice/api/getplan(106) http://myservice/api/getplan(631)

因此，当 webpack 运行时，它没有关于这些 SVG 文件的信息。

所以我的问题是：如果我从外部 URL 提取 SVG 文件，是否可以在 react (TypeScript) 中动态呈现 svg？

这不是重复的问题： How to dynamically import SVG and render it inline

上述问题中描述的方法不起作用，因为它希望将所有 SVG 文件都添加到源代码中。

这种方法也行不通，因为仅仅使用 img 标签不会内联 SVG：

<img src="plan.svg" />

通过 img 标签包含 SVG 使这些事情变得不可能：

任何帮助将不胜感激！

【问题讨论】：

这是你的答案吗？ ***.com/q/61339259/12232340

@Dlk，谢谢，但我在问题中特别提到了这篇文章，并解释说这不是同一个问题。该帖子中提供的解决方案不适用于我的情况。我在上面的问题中解释了原因。

【参考方案1】：

有一个名为 react-svg 的出色软件包可以满足您的需求。

您可以将它与带有 url 字符串的简单 src 属性一起使用，就像 <img> 标记一样。但在幕后，它会从 url 下载 svg 文件并内联注入。例如：

import  ReactSVG  from 'react-svg'

Component = () => <ReactSVG src="http://somewhere.com/my.svg" />,

【讨论】：

非常感谢！这是一个了不起的组件。正是我想要的。我已经在考虑使用 dangerouslySetInnerhtml 来设置 SVG，但是 ReactSVG 更好！

【参考方案2】：

我不确定这是否适合您，但是您可以尝试在<svg /> 标记中使用标记<use />。例如：

<svg
    height=iconHeight
    viewBox=`0 0 $iconWidth $iconHeight`
    width=iconWidth
>
    <use xlinkHref=`$svgPath#$icon` />
</svg>

svgPath 是 SVG 的 URL，icon 是在 SVG 上设置的 ID。您可以尝试省略#$icon 部分。

不确定这是否有帮助。

如果你选择这条路线，你可能与 IE 不兼容...为此你可以使用svg4everybody，但是 IE 已经死了，它应该保持死态。

干杯！