pug 使用生成的 svg 字符串

Question

我正在尝试在我的哈巴狗模板中插入 SVG，但无法正常工作。我正在使用 marcopixel 的 r6operators，它提供了一个函数 operator.toSVG() ，其中 returns SVG 的 XML 字符串。

当我这样做时：

p some text #{operator.name}
      #{operator.toSVG()}

我得到了正确的图像，但 < 和 > 停留在附近：

<p>some text Gridlock&lt;<svg  --- all the SVG content &gt;
</p>

如果我尝试将它放在 SVG 行中，例如：

p some text #{operator.name}
    svg  #{operator.toSVG()}

我得到类似的东西：

<p> some text</p>
<svg>"<svg ---all the content</svg>"</svg>

我检查了一些 mixin 模板或 SVG 使用，但它们采用 href 而不是字符串

Answer 1

如果operator.toSVG() returns <svg>...</svg>，你有几个选择：

- const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p some text #{operator.name}
  | !{operator.toSVG()}

- const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p some text #{operator.name}
  != operator.toSVG()

混合使用选项 1 和 2：

- const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p
  | some text #{operator.name}
  != operator.toSVG()

三种情况下的结果：

<p>some text Gridlock<svg>...</svg></p>

两种变体：

- const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p
  | some text #{operator.name}
  | !{operator.toSVG()}

- const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p.
  some text #{operator.name}
  !{operator.toSVG()}

两种情况下的结果（注意空格的区别）：

<p>some text Gridlock
  <svg>...</svg></p>

pug use generated svg string