SVG過濾器定義不適用於IE11

Question

我的頁面上有一個svg元素，並創建了一個定義以包含指定陰影效果的濾鏡的定義

效果可以在Chrome和Firefox上完美運行，但IE11無法呈現效果。

 <svg class="historicUploadDonuts" width="254.375" height="254.375" filter="url(&quot;#ieDropShadow0&quot;)"> <defs> <filter id="ieDropShadow0" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"></feGaussianBlur> <feOffset in="blur" result="offsetBlur" dx="3" dy="3"></feOffset> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <g class="slices" transform="translate(117.1875,117.1875)"> <g class="labelName"> <circle class="cleanCircle" fill="none" r="58.59375"></circle> <text class="cleanText" fill="#000" style="font-size: 11.7188px; text-anchor: middle;" font-weight="bold"></text> </g> <path class="chart-no-data" stroke="0" d="M5.740531871003218e-15,-93.75A93.75,93.75,0,0,1,93.75,0L58.59375,0A58.59375,58.59375,0,0,0,3.5878324193770114e-15,-58.59375Z"></path> <path class="chart-no-data" stroke="0" d="M93.75,0A93.75,93.75,0,0,1,5.740531871003218e-15,93.75L3.5878324193770114e-15,58.59375A58.59375,58.59375,0,0,0,58.59375,0Z"></path> <path class="chart-no-data" stroke="0" d="M5.740531871003218e-15,93.75A93.75,93.75,0,0,1,-93.75,1.1481063742006436e-14L-58.59375,7.175664838754023e-15A58.59375,58.59375,0,0,0,3.5878324193770114e-15,58.59375Z"></path> <path class="chart-no-data" stroke="0" d="M-93.75,1.1481063742006436e-14A93.75,93.75,0,0,1,-1.7221595613009652e-14,-93.75L-1.0763497258131033e-14,-58.59375A58.59375,58.59375,0,0,0,-58.59375,7.175664838754023e-15Z"></path> </g> </svg> 

我在這里按照示例進行操作-http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg-但無法在IE11上使用該效果

工作的示例使用多邊形-我使用的svg是否沒有拾取過濾器ieDropShadow0是有原因的嗎？

Answer 1

將過濾器設置在最外面的g.slices元素上。 省略內引號。

 <svg class="historicUploadDonuts" width="254.375" height="254.375"> <defs> <filter id="ieDropShadow0" height="130%"> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"></feGaussianBlur> <feOffset in="blur" result="offsetBlur" dx="3" dy="3"></feOffset> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <g class="slices" filter="url(#ieDropShadow0)" transform="translate(117.1875,117.1875)"> <g class="labelName"> <circle class="cleanCircle" fill="none" r="58.59375"></circle> <text class="cleanText" fill="#000" style="font-size: 11.7188px; text-anchor: middle;" font-weight="bold"></text> </g> <path class="chart-no-data" stroke="0" d="M5.740531871003218e-15,-93.75A93.75,93.75,0,0,1,93.75,0L58.59375,0A58.59375,58.59375,0,0,0,3.5878324193770114e-15,-58.59375Z"></path> <path class="chart-no-data" stroke="0" d="M93.75,0A93.75,93.75,0,0,1,5.740531871003218e-15,93.75L3.5878324193770114e-15,58.59375A58.59375,58.59375,0,0,0,58.59375,0Z"></path> <path class="chart-no-data" stroke="0" d="M5.740531871003218e-15,93.75A93.75,93.75,0,0,1,-93.75,1.1481063742006436e-14L-58.59375,7.175664838754023e-15A58.59375,58.59375,0,0,0,3.5878324193770114e-15,58.59375Z"></path> <path class="chart-no-data" stroke="0" d="M-93.75,1.1481063742006436e-14A93.75,93.75,0,0,1,-1.7221595613009652e-14,-93.75L-1.0763497258131033e-14,-58.59375A58.59375,58.59375,0,0,0,-58.59375,7.175664838754023e-15Z"></path> </g> </svg>