SVG 필터는 내 페이지에 <code>svg</code> 요소가 렌더링되지</p> <p>이 효과는 크롬과 파이어 폭스하지만 IE11에서 완벽하게 작동 드롭 그림자 효과를 지정하는 필터를 포함하도록 정의를 만든 IE11

작동하지 DEF 그 효과들. http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg - -SVG 필터는 내 페이지에 <code>svg</code> 요소가 렌더링되지</p> <p>이 효과는 크롬과 파이어 폭스하지만 IE11에서 완벽하게 작동 드롭 그림자 효과를 지정하는 필터를 포함하도록 정의를 만든 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>

내가 여기 예제를 따라하지만 효과는 IE11

작동하는 예에 동작하지 않습니다 다각형을 사용 - 이유가 왜 SVG의 I 사용 중입니까? ieDropShadow0?

출처

2017-12-14 Mike

필터를 가장 바깥쪽에있는 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>

출처

2017-12-14 16:49:54 ccprog

SVG 필터는 내 페이지에 <code>svg</code> 요소가 렌더링되지</p> <p>이 효과는 크롬과 파이어 폭스하지만 IE11에서 완벽하게 작동 드롭 그림자 효과를 지정하는 필터를 포함하도록 정의를 만든 IE11

답변

관련 문제