SVG 过滤器定义不适用于 IE11
SVG filter def not working on IE11
我的页面上有一个 svg
元素,并创建了一个定义来包含一个指定阴影效果的过滤器
效果在 Chrome 和 Firefox 上完美运行,但 IE11 不呈现效果。
<svg class="historicUploadDonuts" width="254.375" height="254.375" filter="url("#ieDropShadow0")">
<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
?
在最外面的 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>
我的页面上有一个 svg
元素,并创建了一个定义来包含一个指定阴影效果的过滤器
效果在 Chrome 和 Firefox 上完美运行,但 IE11 不呈现效果。
<svg class="historicUploadDonuts" width="254.375" height="254.375" filter="url("#ieDropShadow0")">
<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
?
在最外面的 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>