Question

我建立在角材料的應用，並具有MD-圖標結構如下：

<md-icon class="ic1" md-svg-src='data:image/svg+xml, 
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32"> 
    <ellipse ry="16" rx="16" id="svg_1" cy="16" cx="16" stroke-width="1.5" fill="#ff0000"/>          
    </svg>' class="s32"> 
</md-icon> 

但它不能呼叫負載爲角塊https://www.w3.org/2000/svg （我試過HTTP和HTTPS），並拋出一個$ SCE：insecurl錯誤：

由於文檔建議，我嘗試添加的URL SCE白名單：

app.config(function ($sceDelegateProvider) { 
    $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.w3.org/2000/svg', 'https://*.w3.org/**']) 
}) 

但它沒有效果。

我該如何讓它工作？

請注意，我簡化了HTML以僅顯示相關內容，實際上我基於變量動態更改填充顏色，所以我寧願不將每個SVG都保存爲文件，前提是我可以使此動態版本正常工作。

Answer 1

我打算假設您在運行時生成該SVG字符串，而不是像上面那樣對其進行硬編碼？否則，您將無法更改填充顏色。

即，所以像這樣：

md-svg-src='{{generateIcon()}} ... 

這是正確的嗎？

如果是這樣，那麼你有沒有嘗試Base64編碼的SVG？

generateIcon() { 
    svgStr = "whatever"; 
    return "data:image/svg+xml;base64," + base64(svgStr); 
} 

也許有更好的Angular方法來解決這個問題。但這可能是一種可能的解決方法。