为什么无法识别将 svg 标签渲染到 ejs 文件

Question

我尝试使用 d3-node 在服务器端制作图表，并尝试使用以下代码将新图表渲染到 ejs： <%= svgChart %> 当我使用浏览器查看它时，它只显示 svg 标签内容，如下所示：

    <svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs>                      <style type="text/css"><![CDATA[  .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41...............................

不显示图表本身。svgChart 包含 svg 标签的字符串。如果我将 svgChart 内容（字符串）直接复制到 ejs，它将完美显示图表。

加载页面时，ejs 似乎无法渲染标签内容。它认为 svgChart 作为纯字符串。

我的问题：如何使 ejs 将 svgChart 识别为 svg 标签，以便它可以显示 svg 图表而不是标签的文本？

Answer 1

您还可以将外部 SVG 文件直接包含在 EJS 文件中，如下所示。

<%- include ("path/to/file.svg") %>

顺便说一句，此方法还允许将 SVG 中的任何文本渲染为页面中的真实文本。

<svg height="30" width="200">
  <text x="0" y="15" fill="red">Hello from SVG</text>
</svg>

Answer 2

<%- svgChart %>尝试使用<%= svgChart %>. 通过 EJS 文档：

• <%= 将值输出到模板中（HTML 转义）
• <%- 将未转义的值输出到模板中