Angularjs 返回过滤器中的SVG对象

我正在创建一个过滤器，用于更改天气id代码和相应的图像

HTML如下所示：

<span ng-bind-html="weather.today.weather[0].id | weatherIcon"></span>

.filter('weatherIcon', function($sce) {
    return function(weatherCode, isNight) {

        var template;
        var iconCode;

        ...

        template = `<span class="icon" data-icon="${iconCode}"></span>`
        return $sce.trustAsHtml(template);
    }
})

但是我想嵌入我的svg，以便能够更改颜色等。不幸的是，使用

对象

标记，它根本不起作用：

.filter('weatherIcon', function() {
    return function() {
        var template = `<object type="image/svg+xml" data="img/weather-icons-set/CLOUDS/CLOUDS/001lighticons-02.svg" width="100" height="100"></object>`; 
        return template;
    }
})

.filter（'weatherIcon'，function（）{
返回函数（）{
变量模板=``；
返回模板；
}
})

---

我还尝试将

ng include

放入过滤器返回中，但也失败了。您能告诉我，在过滤器中返回

有什么问题，或者给我一个其他方法的提示吗？

您的SVG图像可能定义了

填充
或
笔划
属性，这可能是您的问题的原因，您应该首先检查文件内部

否则我就给你一个提示，告诉你我正在使用的另一种方法。请注意，您需要修改SVG图像

您可以在SVG（，）中使用节点
和

而不是您的
span
：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 1792 1792">
    <use xlink:href="{{PATH_TO_YOUR_FILE + ID}}" style="fill: YOUR_COLOR;"></use>
</svg>

然后在
节点中这样使用它：
xlink:href=“img/weather icons set/CLOUDS/CLOUDS/001lighticons-02.svg#myId”

确保您的图像不会覆盖属性
fill
或
stroke
最终我使用了web字体。我的过滤器如下所示：

<span ng-bind-html="weather.today.weather[0].id | weatherIcon"></span>

.filter('weatherIcon', function($sce) {
    return function(weatherCode, isNight) {

        var template;
        var iconCode;

        ...

        template = `<span class="icon" data-icon="${iconCode}"></span>`
        return $sce.trustAsHtml(template);
    }
})

.filter（'weatherIcon'，函数（$sce）{
返回功能（天气代码、isNight）{
var模板；
var iconCode；
...
模板=``
返回$sce.trustAsHtml（模板）；
}
})
谢谢您的回答。最终我改用了网页字体。