SVG 有时不会出现答案

【问题标题】：SVG does not appear sometimeSVG 有时不会出现
【发布时间】：2016-11-10 03:56:29
【问题描述】：

我的列表中的 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 也被修改，并且在 ID 中添加了“cacheX”（X 是索引）。是不是来自 $mdIconProvider 中的缓存机制。

更新

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

【问题讨论】：

你能提供一个 CodePen 吗？你可以分叉这个 - codepen.io/camden-kid/pen/RRgKYa
很难提供 CodePen，我能够重现这一点，但我需要打开两个选项卡。这真的很奇怪。为了解释上下文，列表显示在线用户。当我刷新一个选项卡时，用户消失在另一个选项卡中，当他重新出现时，SVG 不显示......真的很奇怪......
当我说这很奇怪时，在 Chrome 开发工具中，如果我取消选中 Angular Material 样式 md-icon svg { display: block }，则会显示 SVG...
我从我的 SVG 文件中删除了过滤器，它可以工作... Chrome 错误？

标签： javascript angularjs svg angular-material

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

【讨论】：