pug 使用生成的 svg 字符串

Question

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

当我这样做时：

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

我得到了正确的图像，但 &lt 和 &gt 留在附近：

<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() 返回<svg>...</svg>，您有两种选择：

1. 使用piped text 和unescaped string interpolation：

   - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }
   
   p some text #{operator.name}
     | !{operator.toSVG()}
   

2. 使用unescaped buffered code:

   - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }
   
   p some text #{operator.name}
     != operator.toSVG()
   

3. 混合使用选项 1 和 2：

   - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }
   
   p
     | some text #{operator.name}
     != operator.toSVG()
   

三种情况的结果：

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

两种变体：

1. - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }
   
   p
     | some text #{operator.name}
     | !{operator.toSVG()}
   

2. - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }
   
   p.
     some text #{operator.name}
     !{operator.toSVG()}
   

两种情况下的结果（注意空格的不同）：

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