在過濾器中返回SVG對象

我正在創建一個旨在用相應圖像更改天氣ID代碼的過濾器。在過濾器中返回SVG對象

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>有什麼問題，或給我提供另一種方法的提示？

來源

2017-07-03 0blivion6

您的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>

的subtility是在這裏：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

來源

2017-07-03 12:25:28 Groben

謝謝您的回答。最終我改用了網頁字體。 – 0blivion6

最終我使用網絡字體代替。我的過濾器如下所示：

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

     var template; 
     var iconCode; 

     ... 

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

來源

2017-07-04 11:28:25 0blivion6

在過濾器中返回SVG對象

回答

相關問題