pug使用生成的SVG字符串

Question

我试图在我的pug模板中插入SVG，但不能正常工作。我正在使用marcopixel的r6操作符，它提供了一个函数operator.toSVG()，它返回SVG的XML字符串。

当我这样做时:

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. 使用管道文本和未转义的字符串插值:

   - 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()
   

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>