在过滤器中返回 SVG 对象答案

【问题标题】：Return SVG object in filter在过滤器中返回 SVG 对象
【发布时间】：2017-12-06 16:17:51
【问题描述】：

我正在创建一个过滤器，旨在使用相应的图像更改天气 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> 有什么问题，或者给我提示另一种方法？

【问题讨论】：

标签： angularjs svg

【解决方案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> 节点内。

例如：

<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

【讨论】：

感谢您的回答。最终我改用了网络字体。

【解决方案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);
    }
})

【讨论】：