Question

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

HTML看起来像这样：

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

当我使用img标记时，它可以正常工作：

.filter('weatherIcon', function() {
    return function() {
        var template = `<img src="img/weather-icons-set/CLOUDS/CLOUDS/001lighticons-02.svg">`; 
        return template;
    }
})

但是我想嵌入我的svg以便能够改变颜色等。不幸的是，使用object标签它根本不起作用：

.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;
    }
})

我还尝试将ng-include放入过滤器返回，但它也失败了。你能告诉我，在过滤器中返回<object>有什么问题，或者给我一个暗示另一种方法吗？

Answer 1

您的SVG图片可能会定义fill或stroke属性，这可能是您遇到问题的原因，您应首先检查文件内部。

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

您可以在SVG（Use，Symbol）中使用节点<use>和<symbol>。

而不是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="{{PATH_TO_YOUR_FILE + ID}}"。您使用的SVG图像必须定义Id并位于<symbol>节点内。

e.g：

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="myId" viewBox="0 0 1792 1792">
        [...img here...]
    </symbol>
</svg>

然后您将在<use>节点中使用它：xlink:href="img/weather-icons-set/CLOUDS/CLOUDS/001lighticons-02.svg#myId"

确保您的图片不会覆盖属性fill或stroke

Answer 2

最终我使用了网络字体。我的过滤器如下所示：

.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对象

2 个答案: