Question

我的列表中的SVG图像有一个奇怪的问题。有时（不经常!!）当一个新用户被添加到列表中时，SVG图像被加载（我可以在DOM中看到它），但浏览器中没有任何内容。

我使用 Angular Material 1.09 ，并使用$ mdIconProvider在配置块中初始化此图标：

...
$mdIconProvider
    .icon('sketch:pencil', '/content/images/sketch-cursor.svg');
...

我的列表看起来像这样：

<md-list flex="">                        
    <md-list-item class="md-2-line" ng-repeat="user in users" ng-attr-title="{{user.name + (user.own ? ' (ME)' : '')}}">
        <md-icon md-svg-icon="sketch:pencil" ng-class="user.iconColor"></md-icon>
        <div class="md-list-item-text xs-min-width-80">
            <h3>{{ user.name }}</h3>
        </div>
    </md-list-item>
</md-list>

SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="30" height="30"><defs><filter id="shadow" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="3.5" dy="3.5"/><feGaussianBlur result="blurOut" in="offOut" stdDeviation="4"/><feBlend in="SourceGraphic" in2="blurOut" mode="normal"/></filter></defs><path fill-opacity="1" stroke="black" stroke-width="1" stroke-opacity="1" filter="url(#shadow)" d="M16.16,33.81l-3-.76c-1-.26-1.42-0.09-1.71.93Q9.88,39.89,8.34,45.82a1.11,1.11,0,0,0,.3.87q4.38,4.43,8.82,8.81a1.4,1.4,0,0,0,1.13.31c3.84-1,7.66-2,11.48-3.08,1.17-.32,1.34-0.69,1-1.86-0.22-.8-0.41-1.61-0.64-2.4a2.77,2.77,0,0,1,.82-2.94q3.38-3.35,6.73-6.72L58.28,18.48c1.52-1.52,1.81-1.45,2.37.6,0.36,1.33.65,2.69,1,4A2,2,0,0,1,61,25.28Q51.25,35,41.57,44.67c-3,3-5.92,6-8.94,8.95a5.28,5.28,0,0,1-2.22,1.21Q17.16,58.44,3.89,61.94a1.69,1.69,0,0,1-1.39-.22,1.72,1.72,0,0,1-.23-1.41Q5.81,47,9.44,33.63a5.17,5.17,0,0,1,1.26-2.18c5.93-6,11.91-11.95,17.87-17.91C32,10.08,35.5,6.63,38.92,3.12a3.1,3.1,0,0,1,3.31-1c1.36,0.37,2.73.72,4.09,1.12,1,0.3,1.14.78,0.41,1.58-0.21.23-.43,0.44-0.65,0.66L18.85,32.73A3.08,3.08,0,0,1,16.16,33.81M28.58,44.7a4.93,4.93,0,0,1-1-.56q-3.77-3.74-7.52-7.5A1.23,1.23,0,0,1,20,34.76c0.28-.33.57-0.65,0.87-1L48.14,6.57c1.25-1.25,1.65-1.25,2.88,0l6.6,6.6c1.19,1.19,1.2,1.63,0,2.81l-18.92,19q-4.4,4.41-8.82,8.81A11.34,11.34,0,0,1,28.58,44.7Z" /></svg>

我在DOM中也看到SVG文件中的过滤器ID也被修改了，并且＆＃34; cacheX＆＃34; （X是索引）被添加到ID中。它是来自$ mdIconProvider中的缓存机制。

更新

看起来问题来自SVG文件。如果我从SVG中删除过滤器，我无法重现该问题。

Answer 1

最后，我找到了一个足够好的解决方案（也许还有另一个解决方案！）。在多次读取有关SVG过滤器和Chrome的问题之后，我决定从SVG中移除阴影并解决了问题：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="30" height="30"><path fill-opacity="1" stroke="black" stroke-width="1" stroke-opacity="1" d="..." /></svg>

SVG有时不会出现

1 个答案: