保存在变量中时如何显示 SVG 元素？ [复制]答案

【问题标题】：How to display the SVG element when it is kept in a variable? [duplicate]保存在变量中时如何显示 SVG 元素？ [复制]
【发布时间】：2019-11-07 17:47:40
【问题描述】：

我在显示保存在 js 变量中的 svg 元素时遇到问题。这是一种情境需要，我从后端请求保存为字符串值的 svg 以这种方式完成。然后将来自后端的响应保留为：

let svgValue =  "<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
    <style type="text/css">
    .st0{fill:#FFFFFF;}
    </style>
    <g id="Layer_3">
    </g>
    <path class="st0" d="M1.9,0v30h10.7v-5.5h4.5V30h10.7V0H1.9z M10,22H5.5v-5H10V22z M10,15H5.5v-5H10V15z M10,8H5.5V3H10V8z M17.1,22
    h-4.5v-5h4.5V22z M17.1,15h-4.5v-5h4.5V15z M17.1,8h-4.5V3h4.5V8z M24.2,22h-4.5v-5h4.5V22z M24.2,15h-4.5v-5h4.5V15z M24.2,8h-4.5
    V3h4.5V8z"/>
</svg>
";

话虽如此，我想使用这个 SVG 并在我的页面上显示图标。出于公司原因，我无法向您展示屏幕截图，但基本上，我希望将值标记为 HTML，如下所示：

<><div>{svgValue}</div></>

我已经尝试过了，但由于某种原因，图标没有显示。我不确定我在那里做错了什么，所以如果你们可以让我知道这里发生了什么，那就太好了。

编辑：附加信息：我也在使用 React 框架。它要求我添加一个数组。这有点挑剔，但我无法逃避这一点。

【问题讨论】：

嗯，我已经尝试过这个解决方案，但可能是因为我正在使用 react，我收到了这个错误：'react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child (found: [object HTMLSpanElement]). If you meant to render a collection of children, use an array instead.'
如果您有一个返回 svg GET path/to/svg/generating/endpoint 的后端端点，您可以尝试使用 <img src="path/to/svg/generating/endpoint" alt="" /> 而不是手动请求数据。

标签： javascript html reactjs

【解决方案1】：

您必须使用标签或标签显示 svg 图像。而不是

<div>{svgValue}</div>

写

<div>
  <img src={svgValue} />
</div>

【讨论】：