辅助函数中的 SVG 精灵

Question

我使用这样的 svg 精灵：

<svg><use href="combined.svg#filter_sent"></use></svg>

在Meteor/Blaze 模板助手中，不会渲染 svg 精灵：

<div class="colorset">
    {{{color}}}
</div>


color: function () {
    if (this.color && !this.validate) {
        return '<svg><use href="combined.svg#green"></use></svg>';
    }
    if (this.color && this.certain) {
        return '<svg><use href="combined.svg#orange"></use></svg>';
    } else {
        return '<svg><use href="combined.svg#red"></use></svg>';
    }
}

=> 在use > shadow-root 内，没有插入任何内容。

Answer 1

有很多错误的可能性，最好发布所有代码。

一种可能性：模板名称与辅助函数声明不匹配。例如

在 html 文件中：

<template name="foo">
...

在js文件中：

Template.bar.helpers({ ....

（这比我承认的更让我痛苦）

我不知道你的意思

=> 在use > shadow-root 内部，没有插入任何内容。

使用 chrome 检查器，您可以选择要检查的元素并查看它是否已真正轻松地呈现在页面中。