时间戳

首页 > 解决方案 > 辅助函数中的 SVG 精灵

meteor - 辅助函数中的 SVG 精灵

问题描述

我使用这样的 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，没有插入任何内容。

标签： meteormeteor-blaze

解决方案

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

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

在 html 文件中：

<template name="foo">
...

在 .js 文件中：

Template.bar.helpers({ ....

（这比我承认的更频繁地咬我）

我不知道你是什么意思

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

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

推荐阅读