2016-07-07 5 views
1

私のリストにあるSVG画像に奇妙な問題があります。新しいユーザーがリストに追加されると、SVGイメージがロードされます(私はDOMで見ることができます)が、ブラウザーには何も表示されません。いつかSVGが表示されない

私は角度マテリアル1.09を使用して、私は$ mdIconProviderを使用してconfigブロックでこのアイコンを初期化します。

... 
$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では、filt SVGファイル内のIDも変更され、 "cacheX"(Xはインデックス)がIDに追加されます。これは、$ mdIconProviderのキャッシュメカニズムから来るものですか?

UPDATE

問題は、SVGファイルから来ているようですが見えます。私がSVGからフィルタを削除すると、私は問題を再現できません。

+0

CodePenを提供できますか?あなたはこれをフォークすることができます - http://codepen.io/camden-kid/pen/RRgKYa –

+0

CodePenを提供するのは難しいですが、私はこれを再現することができましたが、2つのタブを開く必要があります。本当に変だ。コンテキストを説明するために、リストはオンラインユーザーを表示します。私は1つのタブをリフレッシュすると、ユーザーはもう1人が消えて、彼が再び利用すると、SVGは表示されません...本当に変わっています... –

+0

そして、私はそれが奇妙だと言うと、Chromeの開発ツールで、角型マテリアルスタイルmd-icon svg {display:block}、SVGが表示されます... –

答えて

0

最後に、私は十分な解決策を見つけました(もう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> 
関連する問題